feat(web): user memory detail

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

@@ -1,15 +1,23 @@
-import { type FC, useEffect, useState } from 'react'
-import { useParams } from 'react-router-dom'
+import { type FC, useEffect, useState, useMemo } from 'react'
+import { useParams, useNavigate } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+import { Dropdown } from 'antd'
 
 import PageHeader from '../components/PageHeader'
 import StatementDetail from './StatementDetail'
 import ForgetDetail from './ForgetDetail'
+import ImplicitDetail from './ImplicitDetail'
+import ShortTermDetail from './ShortTermDetail'
+import PerceptualDetail from './PerceptualDetail'
+import EpisodicDetail from './EpisodicDetail'
 import {
   getEndUserProfile,
 } from '@/api/memory'
 
 const Detail: FC = () => {
+  const { t } = useTranslation()
   const { id, type } = useParams()
+  const navigate = useNavigate()
   const [name, setName] = useState<string>('')
   useEffect(() => {
     if (!id) return
@@ -23,17 +31,37 @@ const Detail: FC = () => {
       setName(response.other_name || response.id) 
     })
   }
+  const items = useMemo(() => {
+    return ['PERCEPTUAL_MEMORY', 'WORKING_MEMORY', 'EMOTIONAL_MEMORY', 'SHORT_TERM_MEMORY', 'IMPLICIT_MEMORY', 'EPISODIC_MEMORY', 'EXPLICIT_MEMORY', 'FORGETTING_MANAGEMENT']
+      .map(key => ({ key, label: t(`userMemory.${key}`) }))
+  }, [t])
+  const onClick = ({ key }: { key: string }) => {
+    navigate(`/user-memory/detail/${id}/${key}`, { replace: true })
+  }
 
-  console.log('Detail', name)
   return (
     <div className="rb:h-full rb:w-full">
       <PageHeader 
         name={name}
         source="node"
+        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}`) : ''}
+              <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>
+          </Dropdown>
+        }
       />
       <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 === 'IMPLICIT_MEMORY' && <ImplicitDetail />}
+        {type === 'SHORT_TERM_MEMORY' && <ShortTermDetail />}
+        {type === 'PERCEPTUAL_MEMORY' && <PerceptualDetail />} {/** TODO */}
+        {type === 'EPISODIC_MEMORY' && <EpisodicDetail />}
       </div>
     </div>
   )