feat(web): user memory feature optimize

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

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

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>

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