From da75abb22328c814d201d24ab4e04fd73b0eb0cd Mon Sep 17 00:00:00 2001
From: zhaoying <yzhao96@best-inc.com>
Date: Thu, 22 Jan 2026 12:26:37 +0800
Subject: [PATCH] feat(web): user memory feature optimize

---
 web/src/i18n/en.ts                            |  1 +
 web/src/i18n/zh.ts                            |  1 +
 .../components/PageHeader.tsx                 |  6 ++---
 .../components/RelationshipNetwork.tsx        | 10 +++++---
 .../components/Suggestions.tsx                |  7 +++++-
 .../UserMemoryDetail/pages/ImplicitDetail.tsx | 24 ++++++++++++-------
 .../pages/StatementDetail.tsx                 | 19 +++++++++++----
 .../UserMemoryDetail/pages/WorkingDetail.tsx  | 20 ++++++++--------
 .../views/UserMemoryDetail/pages/index.tsx    | 21 ++++++++++++----
 9 files changed, 75 insertions(+), 34 deletions(-)

diff --git a/web/src/i18n/en.ts b/web/src/i18n/en.ts
index bc757797..1df2eb6d 100644
--- a/web/src/i18n/en.ts
+++ b/web/src/i18n/en.ts
@@ -2064,6 +2064,7 @@ Memory Bear: After the rebellion, regional warlordism intensified for several re
       stability: 'Stability',
       resilience: 'Resilience',
       suggestions: 'Personalized Suggestions',
+      suggestionLoading: 'Your personalized suggestions are being generated',
     },
     reflectionEngine: {
       reflectionEngineConfig: 'Reflection Engine Configuration',
diff --git a/web/src/i18n/zh.ts b/web/src/i18n/zh.ts
index 2e88ad4a..44f17f49 100644
--- a/web/src/i18n/zh.ts
+++ b/web/src/i18n/zh.ts
@@ -2158,6 +2158,7 @@ export const zh = {
       stability: '稳定性',
       resilience: '恢复力',
       suggestions: '个性化建议',
+      suggestionLoading: '您的个性化建议正在生成中',
     },
     reflectionEngine: {
       reflectionEngineConfig: '反思引擎配置',
diff --git a/web/src/views/UserMemoryDetail/components/PageHeader.tsx b/web/src/views/UserMemoryDetail/components/PageHeader.tsx
index 68cdada8..2c457067 100644
--- a/web/src/views/UserMemoryDetail/components/PageHeader.tsx
+++ b/web/src/views/UserMemoryDetail/components/PageHeader.tsx
@@ -35,13 +35,13 @@ const PageHeader: FC<ConfigHeaderProps> = ({
         {operation}
       </div>
 
-      <Space size={12}>
-        <Button type="primary" ghost className="rb:group rb:h-6! rb:px-2!" onClick={goBack}>
+      <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}
-      </Space>
+      </div>
     </Header>
   );
 };
diff --git a/web/src/views/UserMemoryDetail/components/RelationshipNetwork.tsx b/web/src/views/UserMemoryDetail/components/RelationshipNetwork.tsx
index 7a927479..55e94270 100644
--- a/web/src/views/UserMemoryDetail/components/RelationshipNetwork.tsx
+++ b/web/src/views/UserMemoryDetail/components/RelationshipNetwork.tsx
@@ -266,7 +266,7 @@ const RelationshipNetwork:FC = () => {
                 size={[197.81, 150]}
               />
               : <>
-                <div className="rb:bg-[#F6F8FC] rb:border-t rb:border-b rb:border-[#DFE4ED] rb:font-medium rb:py-2 rb:px-4 rb:h-10">{selectedNode.name}</div>
+                {selectedNode.name && <div className="rb:bg-[#F6F8FC] rb:border-t rb:border-b rb:border-[#DFE4ED] rb:font-medium rb:py-2 rb:px-4 rb:h-10">{selectedNode.name}</div>}
                 <div className="rb:p-4">
                   <>
                     <div className="rb:font-medium rb:leading-5">{t('userMemory.memoryContent')}</div>
@@ -297,7 +297,8 @@ const RelationshipNetwork:FC = () => {
                     {selectedNode.label === 'Statement' && <>
                       {(['emotion_keywords', 'emotion_type', 'emotion_subject', 'importance_score'] as const).map(key => {
                         const statementProps = selectedNode.properties as StatementNodeProperties;
-                        if ((key === 'emotion_keywords' && statementProps[key]?.length > 0) || statementProps[key]) {
+                        if ((key === 'emotion_keywords' && statementProps[key]?.length > 0) || typeof statementProps[key] === 'string') {
+                          console.log('statementProps[key]', statementProps[key])
                           return (
                             <div className="rb:mt-4" key={key}>
                               {t(`userMemory.Statement_${key}`)}
@@ -321,7 +322,10 @@ const RelationshipNetwork:FC = () => {
                             <div className="rb:mt-4" key={key}>
                               {t(`userMemory.ExtractedEntity_${key}`)}
                               <div className="rb:text-[#5B6167] rb:font-regular rb:leading-5 rb:mt-1 rb:pb-4 rb:border-b rb:border-[#DFE4ED]">
-                                {entityProps[key]}
+                                {Array.isArray(entityProps[key]) && entityProps[key].length > 0 
+                                  ? entityProps[key].map((vo, index) => <div key={index}>- {vo}</div>)
+                                  : entityProps[key]
+                                }
                               </div>
                             </div>
                           )
diff --git a/web/src/views/UserMemoryDetail/components/Suggestions.tsx b/web/src/views/UserMemoryDetail/components/Suggestions.tsx
index c2c8ca8b..2687e457 100644
--- a/web/src/views/UserMemoryDetail/components/Suggestions.tsx
+++ b/web/src/views/UserMemoryDetail/components/Suggestions.tsx
@@ -21,6 +21,7 @@ interface Suggestions {
 const Suggestions = forwardRef<{ handleRefresh: () => void; }>((_props, ref) => {
   const { t } = useTranslation()
   const { id } = useParams()
+  const [loading, setLoading] = useState(false)
   const [suggestions, setSuggestions] = useState<Suggestions | null>(null)
 
   useEffect(() => {
@@ -31,10 +32,14 @@ const Suggestions = forwardRef<{ handleRefresh: () => void; }>((_props, ref) =>
     if (!id) {
       return
     }
+    setLoading(true)
     getEmotionSuggestions(id)
       .then((res) => {
         setSuggestions(res as Suggestions)
       })
+      .finally(() => {
+        setLoading(false)
+      })
   }
 
   useImperativeHandle(ref, () => ({
@@ -63,7 +68,7 @@ const Suggestions = forwardRef<{ handleRefresh: () => void; }>((_props, ref) =>
             ))}
           </div>
         </>
-        : <Empty size={88} className="rb:h-full" />
+        : <Empty size={88} subTitle={t(loading ? 'statementDetail.suggestionLoading' : 'empty.tableEmpty')} className="rb:h-full" />
       }
     </RbCard>
   )
diff --git a/web/src/views/UserMemoryDetail/pages/ImplicitDetail.tsx b/web/src/views/UserMemoryDetail/pages/ImplicitDetail.tsx
index d79407da..dfe5c1ee 100644
--- a/web/src/views/UserMemoryDetail/pages/ImplicitDetail.tsx
+++ b/web/src/views/UserMemoryDetail/pages/ImplicitDetail.tsx
@@ -20,14 +20,22 @@ const ImplicitDetail = forwardRef<{ handleRefresh: () => void; }>((_props, ref)
   const habitsRef = useRef<{ handleRefresh: () => void; }>(null)
 
   const handleRefresh = () => {
-    if (!id) return
-    generateProfile(id)
-      .then(() => {
-        preferencesRef.current?.handleRefresh()
-        portraitRef.current?.handleRefresh()
-        interestAreasRef.current?.handleRefresh()
-        habitsRef.current?.handleRefresh()
-      })
+    if (!id) {
+      return Promise.resolve()
+    }
+    return new Promise((resolve, reject) => {
+      generateProfile(id)
+        .then(() => {
+          preferencesRef.current?.handleRefresh()
+          portraitRef.current?.handleRefresh()
+          interestAreasRef.current?.handleRefresh()
+          habitsRef.current?.handleRefresh()
+          resolve(true)
+        })
+        .catch((error) => {
+          reject(error)
+        })
+    })
   }
   useImperativeHandle(ref, () => ({
     handleRefresh
diff --git a/web/src/views/UserMemoryDetail/pages/StatementDetail.tsx b/web/src/views/UserMemoryDetail/pages/StatementDetail.tsx
index 6515263e..72d35c60 100644
--- a/web/src/views/UserMemoryDetail/pages/StatementDetail.tsx
+++ b/web/src/views/UserMemoryDetail/pages/StatementDetail.tsx
@@ -13,11 +13,20 @@ const StatementDetail = forwardRef((_props, ref) => {
   const { id } = useParams()
   const suggestionsRef = useRef<{ handleRefresh: () => void; }>(null)
   const handleRefresh = () => {
-    if (!id) return
-    generateSuggestions(id)
-      .then(() => {
-        suggestionsRef.current?.handleRefresh()
-      })
+    if (!id) {
+      return Promise.resolve()
+    }
+
+    return new Promise((resolve, reject) => {
+      generateSuggestions(id)
+        .then(() => {
+          suggestionsRef.current?.handleRefresh()
+          resolve(true)
+        })
+        .catch((error) => {
+          reject(error)
+        })
+    })
   }
   useImperativeHandle(ref, () => ({
     handleRefresh
diff --git a/web/src/views/UserMemoryDetail/pages/WorkingDetail.tsx b/web/src/views/UserMemoryDetail/pages/WorkingDetail.tsx
index 7ba7c414..843a3b23 100644
--- a/web/src/views/UserMemoryDetail/pages/WorkingDetail.tsx
+++ b/web/src/views/UserMemoryDetail/pages/WorkingDetail.tsx
@@ -2,7 +2,7 @@ import { type FC, useEffect, useState, useMemo } from 'react'
 import clsx from 'clsx'
 import { useTranslation } from 'react-i18next'
 import { useParams } from 'react-router-dom'
-import { Row, Col, Select, Form, Space, Skeleton, Input, Button, Divider } from 'antd'
+import { Row, Col, Skeleton, Button, Divider, Tooltip } from 'antd'
 import RbCard from '@/components/RbCard/Card'
 import {
   getConversations,
@@ -10,7 +10,6 @@ import {
   getConversationDetail,
 } from '@/api/memory'
 import { formatDateTime } from '@/utils/format'
-import Tag from '@/components/Tag'
 import RbAlert from '@/components/RbAlert'
 import Empty from '@/components/Empty'
 import ChatContent from '@/components/Chat/ChatContent'
@@ -33,7 +32,6 @@ interface Detail {
 const WorkingDetail: FC = () => {
   const { t } = useTranslation()
   const { id } = useParams()
-  const [form] = Form.useForm()
   const [loading, setLoading] = useState<boolean>(false)
   const [data, setData] = useState<Conversation[]>([])
   const [messagesLoading, setMessagesLoading] = useState<boolean>(false)
@@ -110,13 +108,15 @@ const WorkingDetail: FC = () => {
               <div className="rb:h-full! rb:border-r rb:border-[#EAECEE] rb:py-3 rb:px-4">
                 {data.map(item => (
                   <div key={item.id} className="rb:mb-3">
-                    <div className={clsx("rb:p-[8px_13px] rb:rounded-lg rb:leading-5 rb:cursor-pointer rb:hover:bg-[#F0F3F8]", {
-                      'rb:bg-[#FFFFFF] rb:shadow-[0px_2px_4px_0px_rgba(0,0,0,0.15)] rb:font-medium rb:hover:bg-[#FFFFFF]!': item.id === selected?.id,
-                    })}
-                      onClick={() => setSelected(item)}
-                    >
-                      {item.title}
-                    </div>
+                    <Tooltip title={item.title}>
+                      <div className={clsx("rb:p-[8px_13px] rb:rounded-lg rb:leading-5 rb:cursor-pointer rb:hover:bg-[#F0F3F8] rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap", {
+                        'rb:bg-[#FFFFFF] rb:shadow-[0px_2px_4px_0px_rgba(0,0,0,0.15)] rb:font-medium rb:hover:bg-[#FFFFFF]!': item.id === selected?.id,
+                      })}
+                        onClick={() => setSelected(item)}
+                      >
+                        {item.title}
+                      </div>
+                    </Tooltip>
                   </div>
                 ))}
               </div>
diff --git a/web/src/views/UserMemoryDetail/pages/index.tsx b/web/src/views/UserMemoryDetail/pages/index.tsx
index 16004edc..c5dea163 100644
--- a/web/src/views/UserMemoryDetail/pages/index.tsx
+++ b/web/src/views/UserMemoryDetail/pages/index.tsx
@@ -2,6 +2,7 @@ import { type FC, useEffect, useState, useMemo, useRef } from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { Dropdown, Button } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons';
 
 import PageHeader from '../components/PageHeader'
 import StatementDetail from './StatementDetail'
@@ -46,18 +47,30 @@ const Detail: FC = () => {
   const onClick = ({ key }: { key: string }) => {
     navigate(`/user-memory/detail/${id}/${key}`, { replace: true })
   }
+
+  const [loading, setLoading] = useState(false)
   const handleRefresh = () => {
+    setLoading(true)
+    let response: any = null
     switch(type) {
       case 'FORGET_MEMORY':
         forgetDetailRef.current?.handleRefresh()
         break;
       case 'EMOTIONAL_MEMORY':
-        statementDetailRef.current?.handleRefresh()
+        response = statementDetailRef.current?.handleRefresh()
         break
       case 'IMPLICIT_MEMORY':
-        implicitDetailRef.current?.handleRefresh()
+        response = implicitDetailRef.current?.handleRefresh()
         break
     }
+
+    if (response instanceof Promise) {
+      response.finally(() => {
+        setLoading(false)
+      })
+    } else {
+      setLoading(false)
+    }
   }
 
   if (type === 'GRAPH') {
@@ -80,8 +93,8 @@ const Detail: FC = () => {
           </Dropdown>
         }
         extra={['FORGET_MEMORY', 'EMOTIONAL_MEMORY', 'IMPLICIT_MEMORY'].includes(type as string) &&
-          <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" />
+          <Button type="primary" ghost size="small" className="rb:h-6! rb:px-2! rb:leading-5.5!" loading={loading} onClick={handleRefresh}>
+            {!loading && <img src={refreshIcon} className="rb:w-4 rb:h-4" /> }
             {t('common.refresh')}
           </Button>}
       />