feat(web): ui upgrade

2026-04-01 16:43:45 +08:00
parent e77a1a92fd
commit ad4ddea977
13 changed files with 590 additions and 219 deletions
--- a/web/src/assets/images/conversation/compress.svg
+++ b/web/src/assets/images/conversation/compress.svg
@@ -0,0 +1,18 @@
+<?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>编组 35</title>
+    <g id="空间里层页面优化" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="多模态对话-3" transform="translate(-1228, -338)" stroke="#171719" stroke-width="1.2">
+            <g id="编组-34备份" transform="translate(540, 320)">
+                <g id="编组-33" transform="translate(683, 13)">
+                    <g id="编组-35" transform="translate(5, 5)">
+                        <g id="编组-63" transform="translate(3, 3)">
+                            <polyline id="路径" points="10 4 6 4 6 0"></polyline>
+                            <polyline id="路径备份-3" transform="translate(2, 8) scale(-1, -1) translate(-2, -8)" points="4 10 0 10 0 6"></polyline>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/web/src/assets/images/conversation/expand.svg
+++ b/web/src/assets/images/conversation/expand.svg
@@ -0,0 +1,15 @@
+<?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>编组 36</title>
+    <g id="空间里层页面优化" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="多模态对话-3" transform="translate(-763, -266)" stroke="#171719" stroke-width="1.2">
+            <g id="编组-34" transform="translate(540, 248)">
+                <g id="编组-33" transform="translate(218, 13)">
+                    <g id="编组-36" transform="translate(5, 5)">
+                        <path d="M9.02271937,3 L13,3 L13,7.07419434 M6.96571644,13 L3,13 L3,9.04391117" id="形状"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/web/src/components/BtnTabs/index.tsx
+++ b/web/src/components/BtnTabs/index.tsx
@@ -24,10 +24,11 @@ interface BtnTabsProps {
  onChange: (key: string) => void;
  /** Optional extra class name for the container */
  className?: string;
+  variant?: 'outline' | 'borderless'
 }

 /** Button-style tab switcher — renders tabs as pill-shaped buttons with active highlight */
-const BtnTabs: FC<BtnTabsProps> = ({ items, activeKey, onChange, className }) => {
+const BtnTabs: FC<BtnTabsProps> = ({ items, activeKey, onChange, className, variant = 'borderless' }) => {
  return (
    <Flex align="center" gap={8} className={className || ''}>
      {items.map((tab) => (
@@ -35,8 +36,9 @@ const BtnTabs: FC<BtnTabsProps> = ({ items, activeKey, onChange, className }) =>
          key={tab.key}
          onClick={() => onChange(tab.key)}
          className={clsx('rb:px-2 rb:py-1 rb:rounded-[13px] rb:text-[12px] rb:leading-4.5 rb:cursor-pointer', {
-            'rb:bg-[#F6F6F6]': activeKey !== tab.key,
-            'rb:bg-[#171719] rb:text-white': activeKey === tab.key,
+            'rb:bg-[#F6F6F6]': activeKey !== tab.key && variant === 'borderless',
+            'rb-border rb:bg-white': activeKey !== tab.key && variant === 'outline',
+            'rb:bg-[#171719] rb:text-white rb:border-[#171719]': activeKey === tab.key,
          })}
        >
          {tab.label}
--- a/web/src/components/Chat/AudioPlayer.tsx
+++ b/web/src/components/Chat/AudioPlayer.tsx
@@ -0,0 +1,152 @@
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2026-03-16 15:00:07 
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-03-27 15:23:14
+ */
+import { type FC, useRef, useState, useEffect } from 'react'
+import { Flex, Dropdown, type MenuProps, Slider } from 'antd'
+import clsx from 'clsx'
+import { useTranslation } from 'react-i18next'
+
+/** Available playback speed options. */
+const SPEEDS = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]
+
+/** Format seconds into "MM:SS" display string. */
+const fmt = (s: number) => `${String(Math.floor(s / 60)).padStart(2, '0')}:${String(Math.floor(s % 60)).padStart(2, '0')}`
+
+/**
+ * Props for the AudioPlayer component.
+ * @property src - Audio file URL to play.
+ * @property fileName - Display name shown beside the file icon.
+ * @property fileSize - Human-readable file size string (e.g. "3.2 MB").
+ */
+interface AudioPlayerProps {
+  src: string
+  fileName?: string
+  fileSize?: string
+}
+
+/**
+ * AudioPlayer – A compact inline audio player with playback controls.
+ *
+ * Displays file metadata (name & size), a play/pause toggle, a seekable
+ * progress slider, elapsed/total time, and a dropdown menu for downloading
+ * the file or changing playback speed.
+ *
+ * @example
+ * <AudioPlayer src="/audio/demo.mp3" fileName="demo.mp3" fileSize="3.2 MB" />
+ */
+const AudioPlayer: FC<AudioPlayerProps> = ({ src, fileName, fileSize }) => {
+  const { t } = useTranslation()
+  const audioRef = useRef<HTMLAudioElement>(null)
+  const [playing, setPlaying] = useState(false)
+  const [current, setCurrent] = useState(0)
+  const [duration, setDuration] = useState(0)
+  const [speed, setSpeed] = useState(1)
+
+  /* Bind native audio events to sync React state; re-binds when src changes. */
+  useEffect(() => {
+    const audio = audioRef.current
+    if (!audio) return
+    const onTime = () => setCurrent(audio.currentTime)
+    const onMeta = () => setDuration(audio.duration)
+    const onEnd = () => setPlaying(false)
+    audio.addEventListener('timeupdate', onTime)
+    audio.addEventListener('loadedmetadata', onMeta)
+    audio.addEventListener('ended', onEnd)
+    return () => {
+      audio.removeEventListener('timeupdate', onTime)
+      audio.removeEventListener('loadedmetadata', onMeta)
+      audio.removeEventListener('ended', onEnd)
+    }
+  }, [src])
+
+  /** Toggle between play and pause. */
+  const togglePlay = () => {
+    const audio = audioRef.current
+    if (!audio) return
+    if (playing) { audio.pause(); setPlaying(false) }
+    else { audio.play(); setPlaying(true) }
+  }
+
+  /** Seek to a specific position (in seconds) on the audio timeline. */
+  const handleSeek = (val: number) => {
+    if (audioRef.current) audioRef.current.currentTime = val
+    setCurrent(val)
+  }
+
+  /** Update playback speed on both React state and the native audio element. */
+  const setPlaybackSpeed = (s: number) => {
+    setSpeed(s)
+    if (audioRef.current) audioRef.current.playbackRate = s
+  }
+
+  /** Open the audio source URL in a new tab to trigger download. */
+  const handleDownload = () => window.open(src, '_blank')
+
+  /** Dropdown menu items: download and playback speed sub-menu. */
+  const mainMenu: MenuProps = {
+    items: [
+      {
+        key: 'download',
+        icon: <div className="rb:size-6 rb:bg-cover rb:cursor-pointer rb:bg-[url('@/assets/images/userMemory/download.svg')]" />,
+        label: t('common.download'),
+        onClick: handleDownload,
+      },
+      {
+        key: 'speed',
+        icon: <div className="rb:size-6 rb:bg-cover rb:cursor-pointer rb:bg-[url('@/assets/images/userMemory/play_speed.svg')]" />,
+        label: t('perceptualDetail.playbackSpeed'),
+        children: SPEEDS.map(s => ({
+          key: String(s),
+          label: <span className={s === speed ? 'rb:font-bold rb:text-[#171719]' : ''}>{s === 1 ? 'normal' : s}</span>,
+          onClick: () => setPlaybackSpeed(s),
+        })),
+      },
+    ],
+  }
+
+  return (
+    <div className="rb-border rb:rounded-xl rb:py-2 rb:px-2.5 rb:w-full">
+      <audio ref={audioRef} src={src} preload="metadata" />
+      <Flex align="center" justify="space-between" className="rb:mb-2">
+        <Flex align="center" gap={12}>
+          <div className="rb:size-5 rb:bg-cover rb:bg-[url('@/assets/images/file/audio.svg')]" />
+          <div className="rb:flex-1">
+            <div className="rb:font-medium rb:leading-5 rb:text-[14px] rb:wrap-break-word rb:line-clamp-1">{fileName}</div>
+            <div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4.5">{fileSize || '-'}</div>
+          </div>
+        </Flex>
+        <Flex align="center" gap={12}>
+          <div
+            className={clsx("rb:cursor-pointer rb:size-5 rb:bg-cover", {
+              "rb:bg-[url('@/assets/images/userMemory/play.svg')]": !playing,
+              "rb:bg-[url('@/assets/images/userMemory/pause.svg')]": playing,
+            })}
+            onClick={togglePlay}
+          ></div>
+          
+          <Dropdown menu={mainMenu} trigger={['click']} placement="bottomRight">
+            <div className="rb:cursor-pointer rb:size-5 rb:bg-[url('@/assets/images/common/more.svg')] rb:hover:bg-[url('@/assets/images/common/more_hover.svg')]"></div>
+          </Dropdown>
+        </Flex>
+      </Flex>
+      <Flex align="center" gap={8} className="rb:mt-3!">
+        <Slider
+          min={0}
+          max={duration || 0}
+          step={0.1}
+          value={current}
+          onChange={handleSeek}
+          tooltip={{ formatter: null }}
+          className="rb:flex-1 rb:m-0!"
+          styles={{ track: { background: '#171719' }, rail: { background: '#E4E4E4' }, handle: { display: 'none' } }}
+        />
+        <span className="rb:text-[12px] rb:leading-4.5 rb:text-[#5B6167] rb:whitespace-nowrap">{fmt(current)} / {fmt(duration)}</span>
+      </Flex>
+    </div>
+  )
+}
+
+export default AudioPlayer
--- a/web/src/components/Chat/ChatContent.tsx
+++ b/web/src/components/Chat/ChatContent.tsx
@@ -8,9 +8,12 @@ import { type FC, useRef, useEffect, useState } from 'react'
 import clsx from 'clsx'
 import Markdown from '@/components/Markdown'
 import type { ChatContentProps } from './types'
-import { Spin, Divider, Space, Image, Flex, Button } from 'antd'
+import { Spin, Image, Flex, Button } from 'antd'
 import { SoundOutlined } from '@ant-design/icons'
-import { t } from 'i18next'
+import { useTranslation } from 'react-i18next'
+
+import AudioPlayer from './AudioPlayer'
+import VideoPlayer from './VideoPlayer'

 const getFileUrl = (file: any) => {
  return file.thumbUrl || file.url || (file.originFileObj ? URL.createObjectURL(file.originFileObj) : undefined)
@@ -32,6 +35,7 @@ const ChatContent: FC<ChatContentProps> = ({
  renderRuntime,
  onSend
 }) => {
+  const { t } = useTranslation()
  // Scroll container reference for controlling auto-scroll to bottom
  const scrollContainerRef = useRef<(HTMLDivElement | null)>(null)
  const prevDataLengthRef = useRef(data.length);
@@ -151,65 +155,101 @@ const ChatContent: FC<ChatContentProps> = ({
                    }
                    if (file.type.includes('video')) {
                      return (
-                        <div key={file.url || file.uid} className="rb:inline-block rb:group rb:relative rb:rounded-lg">
-                          <video src={getFileUrl(file)} controls className="rb:max-w-80 rb:rounded-lg rb:object-cover rb:cursor-pointer" />
+                        <div key={file.url || file.uid} className="rb:w-50">
+                          {/* <video src={getFileUrl(file)} controls className="rb:max-w-80 rb:rounded-lg rb:object-cover rb:cursor-pointer" /> */}
+                          <VideoPlayer key={file.url || file.uid} src={getFileUrl(file)} />
                        </div>
                      )
                    }
                    if (file.type.includes('audio')) {
                      return (
-                        <div key={file.url || file.uid} className="rb:inline-flex rb:items-center rb:group rb:relative rb:rounded-lg rb:bg-[#F0F3F8] rb:py-2 rb:px-2.5 rb:gap-2">
-                          <audio src={getFileUrl(file)} controls className="rb:max-w-80" />
+                        <div key={file.url || file.uid} className="rb:w-50">
+                          <AudioPlayer key={file.url || file.uid} src={getFileUrl(file)} />
                        </div>
                      )
                    }
+
                    return (
-                      <div key={file.url || file.uid} className="rb:relative rb:rounded-lg rb:bg-[#F0F3F8] rb:p-1! rb:cursor-pointer" onClick={() => handleDownload(file)}>
-                        {(file.type.includes('excel') || file.type.includes('spreadsheetml.sheet') || file.type.includes('csv'))
-                          ? <div
-                            className="rb:size-10 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/excel.svg')]"
-                          ></div>
-                          :(file.type.includes('pdf'))
-                          ? <div
-                            className="rb:size-10 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/pdf.svg')]"
-                          ></div>
-                          : (file.type.includes('doc') || file.type.includes('docx') || file.type.includes('word') || file.type.includes('wordprocessingml.document'))
-                          ? <div
-                            className="rb:size-10 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/word.svg')]"
-                          ></div>
-                          : null
-                        }
-                      </div>
+                      <Flex
+                        key={file.url || file.uid}
+                        align="center"
+                        gap={10}
+                        className="rb:text-left rb:w-45 rb:text-[12px] rb:group rb:relative rb:rounded-lg rb-border rb:py-2! rb:px-2.5! rb:border rb:border-[#F6F6F6]"
+                        onClick={() => handleDownload(file)}
+                      >
+                        <div
+                          className={clsx(
+                            "rb:size-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/pdf_disabled.svg')]",
+                            file.type?.includes('pdf')
+                              ? "rb:bg-[url('@/assets/images/file/pdf.svg')]"
+                              : (file.type?.includes('excel') || file.type?.includes('spreadsheetml.sheet'))
+                              ? "rb:bg-[url('@/assets/images/file/excel.svg')]"
+                              : file.type?.includes('csv')
+                              ? "rb:bg-[url('@/assets/images/file/csv.svg')]"
+                              : file.type?.includes('html')
+                              ? "rb:bg-[url('@/assets/images/file/html.svg')]"
+                              : file.type?.includes('json')
+                              ? "rb:bg-[url('@/assets/images/file/json.svg')]"
+                              : file.type?.includes('ppt')
+                              ? "rb:bg-[url('@/assets/images/file/ppt.svg')]"
+                              : file.type?.includes('text')
+                              ? "rb:bg-[url('@/assets/images/file/txt.svg')]"
+                              : file.type?.includes('markdown')
+                              ? "rb:bg-[url('@/assets/images/file/md.svg')]"
+                              : (file.type?.includes('doc') || file.type?.includes('docx') || file.type?.includes('word') || file.type?.includes('wordprocessingml.document'))
+                              ? "rb:bg-[url('@/assets/images/file/word.svg')]"
+                              : null
+                          )}
+                        ></div>
+                        <div className="rb:flex-1 rb:w-32.5">
+                          <div className="rb:leading-4 rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap">{file.name}</div>
+                          <div className="rb:leading-3.5 rb:mt-0.5 rb:text-[#5B6167] rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap">{file.type?.split('/')[file.type?.split('/').length - 1]} · {file.size}</div>
+                        </div>
+                      </Flex>
                    )
                  })}
                </Flex>}
                {/* Message bubble */}
-                <div className={clsx('rb:text-left rb:rounded-lg rb:leading-5 rb:p-[10px_12px_2px_12px] rb:inline-block rb:max-w-130 rb:wrap-break-word rb:relative', contentClassNames, {
+                <div className={clsx('rb:text-left rb:leading-5 rb:inline-block rb:wrap-break-word rb:relative', item.role === 'user' ? contentClassNames : '', {
                  // Error message style (content is null and not assistant message)
                  'rb:bg-[rgba(255,93,52,0.08)] rb:text-[#FF5D34]': (item.status && item.status !== 'completed') || (errorDesc && item.role === 'assistant' && item.content === null && !renderRuntime),
                  // Assistant message style
-                  'rb:bg-[#E3EBFD]': item.role === 'user',
+                  'rb:bg-[#E3EBFD] rb:p-[10px_12px_2px_12px] rb:rounded-lg rb:max-w-130': item.role === 'user',
+                  'rb:max-w-full': item.role === 'assistant',
                  // User message style
-                  'rb:bg-[#F6F6F6] rb:text-[#212332]': item.role === 'assistant' && (item.content || item.content === '' || typeof renderRuntime === 'function'),
-                  'rb:mt-1.5': labelPosition === 'top',
-                  'rb:mb-1.5': labelPosition === 'bottom',
+                  'rb:text-[#212332]': item.role === 'assistant' && (item.content || item.content === '' || typeof renderRuntime === 'function'),
+                  'rb:mt-1': labelPosition === 'top',
+                  'rb:mb-1': labelPosition === 'bottom',
                })}>
-                  {item.meta_data?.reasoning_content && <div className="rb:mb-2 rb:border rb:rounded-md rb:px-3 rb:pt-2 rb:bg-white rb:text-[12px]">
-                    <Flex
-                      align="center"
-                      justify="space-between"
-                      className="rb:text-[#5B6167] rb:font-medium rb:cursor-pointer rb:pb-2!"
-                      onClick={() => toggleReasoning(index)}
-                    >
-                      <span>{t('memoryConversation.reasoning_content')}</span>
-                      <div
-                        className={clsx("rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/common/arrow_up.svg')]", {
-                          'rb:rotate-180': !isReasoningExpanded(index),
-                        })}
-                      ></div>
-                    </Flex>
-                    {isReasoningExpanded(index) && <Markdown content={item.meta_data.reasoning_content} />}
-                  </div>}
+                  {item.meta_data?.reasoning_content &&
+                    <div className={clsx("rb:mb-4 rb-border rb:rounded-xl rb:px-4 rb:pt-4 rb:bg-white", {
+                      'rb:hover:bg-[#F6F6F6] rb:w-64': !isReasoningExpanded(index)
+                    })}>
+                      <Flex
+                        align="center"
+                        justify="space-between"
+                        className="rb:font-medium rb:pb-4!"
+                      >
+                        <span>{t('memoryConversation.reasoning_content')}</span>
+                        <Flex
+                          align="center"
+                          justify="center"
+                          className={clsx("rb:size-6.5 rb:cursor-pointer rb-border rb:rounded-lg", {
+                            'rb:hover:bg-[#F6F6F6]!': isReasoningExpanded(index)
+                          })}
+                          onClick={() => toggleReasoning(index)}
+                        >
+                          <div
+                            className={clsx("rb:size-4 rb:bg-cover", {
+                              'rb:bg-[url("@/assets/images/conversation/compress.svg")]': isReasoningExpanded(index),
+                              'rb:bg-[url("@/assets/images/conversation/expand.svg")]': !isReasoningExpanded(index)
+                            })}
+                          ></div>
+                      </Flex>
+                      </Flex>
+                    {isReasoningExpanded(index) && <Markdown content={item.meta_data.reasoning_content} className="rb:text-[#5B6167] rb:text-[12px]" />}
+                    </div>
+                  }
                  {item.status && <div className="rb:size-5 rb:bg-cover rb:bg-[url('@/assets/images/conversation/exclamation_circle.svg')] rb:absolute rb:-left-7"></div>}
                  {item.subContent && renderRuntime && renderRuntime(item, index)}
                  {/* Render message content using Markdown component */}
@@ -222,44 +262,42 @@ const ChatContent: FC<ChatContentProps> = ({
                      >{question}</Button>
                    ))}
                  </Flex>}
-                  {item.meta_data?.citations && item.meta_data?.citations.length > 0 && <div className="rb:mt-2 rb:pt-2 rb:border-t rb:border-[#E3EBFD]">
-                    <div className="rb:text-[12px] rb:text-[#5B6167] rb:font-medium">{t('memoryConversation.citations')}</div>
-                    {item.meta_data?.citations?.map((citation, idx) => (
-                      <Button
-                        type="link"
-                        key={idx}
-                        size="small"
-                        className="rb:text-[12px]!"
-                        onClick={() => {
-                          const params = new URLSearchParams({ documentId: citation.document_id, parentId: citation.knowledge_id });
-                          window.open(`/#/knowledge-base/${citation.knowledge_id}/DocumentDetails?${params}`, '_blank');
-                        }}
-                      >{citation.file_name}</Button>
-                    ))}
-                  </div>}
+                  {item.meta_data?.citations && item.meta_data?.citations.length > 0 &&
+                    <Flex vertical gap={4} className="rb:mt-1! rb:pt-3! rb-border-t rb:mb-2!">
+                      <div className="rb:font-medium">{t('memoryConversation.citations')}</div>
+                      {item.meta_data?.citations?.map((citation, idx) => (
+                        <div
+                          key={idx}
+                          className="rb:text-[#155EEF] rb:leading-5 rb:underline rb:cursor-pointer"
+                          onClick={() => {
+                            const params = new URLSearchParams({ documentId: citation.document_id, parentId: citation.knowledge_id });
+                            window.open(`/#/knowledge-base/${citation.knowledge_id}/DocumentDetails?${params}`, '_blank');
+                          }}
+                        >{citation.file_name}</div>
+                      ))}
+                    </Flex>
+                  }
+                </div>
+                {/* Bottom label (such as timestamp, username, etc.) */}
+                {labelPosition === 'bottom' && <Flex gap={16} align="center" justify={item.role === 'user' ? 'end' : 'start'}>
                  {item.meta_data?.audio_url && <>
-                    <Divider className="rb:my-3!" />
-                    <Space size={12} className="rb:pb-2 rb:pl-1">
-                      {playingIndex !== item.meta_data?.audio_url && item.meta_data?.audio_status === 'pending'
-                        ? <Spin />
-                        : playingIndex !== item.meta_data?.audio_url
+                    {playingIndex !== item.meta_data?.audio_url && item.meta_data?.audio_status === 'pending'
+                      ? <Spin />
+                      : playingIndex !== item.meta_data?.audio_url
                        ? <SoundOutlined className={clsx("rb:cursor-pointer rb:size-5.5", {
                          'rb:text-[#FF5D34]': item.meta_data?.audio_status === 'error',
                          'rb:hover:text-[#155EEF]!': !item.meta_data?.audio_status || !['pending', 'error'].includes(item.meta_data?.audio_status)
                        })} onClick={() => handlePlay(item.meta_data?.audio_url!, item.meta_data?.audio_status)} />
                        : <div
-                            className="rb:size-5.5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/audio_ing.gif')]"
-                            onClick={() => handlePlay(item.meta_data?.audio_url!, item.meta_data?.audio_status)}
-                          />
-                      }
-                    </Space>
+                          className="rb:size-5.5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/audio_ing.gif')]"
+                          onClick={() => handlePlay(item.meta_data?.audio_url!, item.meta_data?.audio_status)}
+                        />
+                    }
                  </>}
-                </div>
-                {/* Bottom label (such as timestamp, username, etc.) */}
-                {labelPosition === 'bottom' &&
                  <div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4 rb:font-regular">
                    {labelFormat(item)}
                  </div>
+                </Flex>
                }
              </>
            }
--- a/web/src/components/Chat/VideoPlayer.tsx
+++ b/web/src/components/Chat/VideoPlayer.tsx
@@ -0,0 +1,62 @@
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2026-03-24 12:21:56 
+ * @Last Modified by:   ZhaoYing 
+ * @Last Modified time: 2026-03-24 12:21:56 
+ */
+import { type FC, useRef, useState } from 'react'
+import { CloseOutlined } from '@ant-design/icons'
+interface VideoPlayerProps {
+  src: string
+}
+
+const VideoPlayer: FC<VideoPlayerProps> = ({ src }) => {
+  const [open, setOpen] = useState(false)
+  const videoRef = useRef<HTMLVideoElement>(null)
+
+  const handleOpen = () => setOpen(true)
+
+  const handleClose = () => {
+    videoRef.current?.pause()
+    setOpen(false)
+  }
+
+  return (
+    <>
+      {/* Thumbnail with play overlay */}
+      <div
+        className="rb:relative rb:w-full rb:h-full rb:rounded-xl rb:overflow-hidden rb:cursor-pointer rb:group"
+        onClick={handleOpen}
+      >
+        <video src={src} className="rb:w-full rb:h-full rb:object-cover" preload="metadata" />
+        <div className="rb:absolute rb:inset-0 rb:bg-black/20 rb:flex rb:items-center rb:justify-center rb:transition-colors group-hover:rb:bg-black/30">
+          <div className="rb:size-10 rb:rounded-full rb:bg-white/80 rb:flex rb:items-center rb:justify-center">
+            <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
+              <path d="M5 3.5L14.5 9L5 14.5V3.5Z" fill="#171719" />
+            </svg>
+          </div>
+        </div>
+      </div>
+
+      {/* Fullscreen modal */}
+      {open && (
+        <div
+          className="rb:fixed rb:inset-0 rb:z-1000 rb:bg-black/80 rb:flex rb:items-center rb:justify-center"
+          onClick={handleClose}
+        >
+          <button className="ant-image-preview-close"><CloseOutlined /></button>
+          <video
+            ref={videoRef}
+            src={src}
+            controls
+            autoPlay
+            className="rb:max-w-[90vw] rb:max-h-[90vh] rb:rounded-xl"
+            onClick={e => e.stopPropagation()}
+          />
+        </div>
+      )}
+    </>
+  )
+}
+
+export default VideoPlayer
--- a/web/src/components/Markdown/index.tsx
+++ b/web/src/components/Markdown/index.tsx
@@ -62,7 +62,7 @@ const components = {
  ul: ({ children, ...props }: any) => <ul className="rb:list-disc rb:ml-6 rb:mb-2" {...props}>{children}</ul>,
  ol: ({ children, ...props }: any) => <ol className="rb:list-decimal rb:ml-6 rb:mb-2" {...props}>{children}</ol>,  
  li: ({ children, ...props }: any) => <li className="rb:mb-1" {...props}>{children}</li>,  
-  blockquote: ({ children, ...props }: any) => <blockquote className="rb:border-l-4 rb:border-[#D9D9D9] rb:pl-4 rb:mb-2" {...props}>{children}</blockquote>,
+  blockquote: ({ children, ...props }: any) => <blockquote className="rb:bg-[#F6F6F6] rb:rounded-lg rb:pt-2.5 rb:pb-0.5 rb:px-3 rb:mb-3 rb:mt-1" {...props}>{children}</blockquote>,
  p: ({ children, ...props }: any) => <p className="rb:mb-2" {...props}>{children}</p>,
  strong: ({ children, ...props }: any) => <strong className="rb:font-bold" {...props}>{children}</strong>,
  em: ({ children, ...props }: any) => <em className="rb:italic" {...props}>{children}</em>,
@@ -81,10 +81,10 @@ const components = {
  audio: ({ src, ...props }: any) => <AudioBlock node={{ children: [{ properties: { src: src || '' } }] }} {...props} />,
  a: ({ href, children, ...props }: any) => <Link href={href || '#'} {...props}>{children}</Link>,
  button: ({ children }: any) => <RbButton node={{ children }}>{[children]}</RbButton>,
-  table: ({ children, ...props }: any) => <div className="rb:overflow-x-auto rb:max-w-full"><table className="rb:border rb:border-[#D9D9D9] rb:mb-2" {...props}>{children}</table></div>,
-  tr: ({ children, ...props }: any) => <tr className="rb:border rb:border-[#D9D9D9]" {...props}>{children}</tr>,
-  th: ({ children, ...props }: any) => <th className="rb:border rb:border-[#D9D9D9] rb:px-2 rb:py-1 rb:text-left rb:font-bold" {...props}>{children}</th>,
-  td: ({ children, ...props }: any) => <td className="rb:border rb:border-[#D9D9D9] rb:px-2 rb:py-1 rb:text-left" {...props}>{children}</td>,
+  table: ({ children, ...props }: any) => <div className="rb:overflow-x-auto rb:max-w-full"><table className="rb:border rb:border-[#EBEBEB] rb:mb-2" {...props}>{children}</table></div>,
+  tr: ({ children, ...props }: any) => <tr className="rb:border rb:border-[#EBEBEB]" {...props}>{children}</tr>,
+  th: ({ children, ...props }: any) => <th className="rb:border rb:border-[#EBEBEB] rb:px-2 rb:py-1 rb:text-left rb:font-bold" {...props}>{children}</th>,
+  td: ({ children, ...props }: any) => <td className="rb:border rb:border-[#EBEBEB] rb:px-2 rb:py-1 rb:text-left" {...props}>{children}</td>,
  input: ({ children, ...props }: any) => {
    switch (props.type) {
      case 'color':
@@ -122,6 +122,7 @@ const components = {
  select: ({ children, ...props }: any) => <Select style={{width: '100%'}} {...props}>{children}</Select>,
  textarea: ({ children, ...props }: any) => <Input.TextArea {...props}>{children}</Input.TextArea>,
  form: ({ children, ...props }: any) => <Form {...props}>{children}</Form>,
+  hr: (props: any) => <hr className="rb:border-t rb:border-[#EBEBEB] rb:my-3" {...props} />
 }

 const RbMarkdown: FC<RbMarkdownProps> = ({
--- a/web/src/styles/antdThemeConfig.ts
+++ b/web/src/styles/antdThemeConfig.ts
@@ -149,6 +149,9 @@ export const lightTheme: ThemeConfig = {
    },
    Segmented: {
      trackBg: '#E1E2E7',
+    },
+    Pagination: {
+      itemSizeSM: 28,
    }
  }
 };
--- a/web/src/styles/index.css
+++ b/web/src/styles/index.css
@@ -271,6 +271,13 @@ body {
 .ant-pagination .ant-pagination-item.ant-pagination-item-active {
  font-weight: 400;
 }
+.ant-pagination.ant-pagination-mini .ant-pagination-item {
+  margin-right: 8px;
+}
+.ant-pagination.ant-pagination-mini .ant-pagination-options-quick-jumper input,
+.ant-pagination.ant-pagination-mini .ant-select-single.ant-select-sm {
+  height: 28px;
+}

 .ant-modal .ant-modal-content {
  padding: 24px;
@@ -409,4 +416,8 @@ body {
 .upload-block,
 .upload-block.ant-upload-wrapper .ant-upload-select {
  display: block;
+}
+.ant-picker-outlined:focus,
+.ant-picker-outlined:focus-within {
+  box-shadow: none;
 }
--- a/web/src/views/OrderHistory/index.tsx
+++ b/web/src/views/OrderHistory/index.tsx
@@ -205,35 +205,33 @@ const OrderHistory: React.FC = () => {
  ];

  return (
-    <div className="rb:h-[calc(100vh-80px)] rb:overflow-hidden">
-      <Flex justify="space-between" className="rb:mb-4!">
-        <Space size={10}>
-          <Select
-            defaultValue={query.status}
-            placeholder={t('common.select')}
-            options={statusOptions}
-            className="rb:w-30"
-            onChange={handleChangeStatus}
-          />
-          <Select
-            defaultValue={query.product_type}
-            placeholder={t('common.select')}
-            options={productTypeOptions}
-            className="rb:w-30"
-            onChange={handleChangeType}
-          />
-          <Select
-            defaultValue={timeType}
-            placeholder={t('common.select')}
-            options={timeOptions}
-            className="rb:w-30"
-            onChange={handleChangeTime}
-          />
-        </Space>
+    <div className="rb:h-full rb:overflow-hidden rb:bg-white rb:rounded-lg rb:pt-3 rb:px-3">
+      <Flex className="rb:mb-3!" gap={10}>
+        <Select
+          defaultValue={query.status}
+          placeholder={t('common.select')}
+          options={statusOptions}
+          className="rb:w-30"
+          onChange={handleChangeStatus}
+        />
+        <Select
+          defaultValue={query.product_type}
+          placeholder={t('common.select')}
+          options={productTypeOptions}
+          className="rb:w-30"
+          onChange={handleChangeType}
+        />
+        <Select
+          defaultValue={timeType}
+          placeholder={t('common.select')}
+          options={timeOptions}
+          className="rb:w-30"
+          onChange={handleChangeTime}
+        />
        <SearchInput
          placeholder={t('pricing.searchPlaceholder')}
          onSearch={(value) => setQuery(prev => ({ ...prev, search: value }))}
-          className="rb:w-70"
+          variant="outlined"
        />
      </Flex>
      <Table
--- a/web/src/views/SelfReflectionEngine/index.tsx
+++ b/web/src/views/SelfReflectionEngine/index.tsx
@@ -11,19 +11,20 @@
 */

 import React, { useState, useEffect } from 'react';
-import { Row, Col, Form, App, Button, Space, Select, Flex } from 'antd';
+import { Row, Col, Form, App, Button, Space, Select, Flex, Divider } from 'antd';
 import { useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+import clsx from 'clsx';

 import RbCard from '@/components/RbCard/Card';
 import { getMemoryReflectionConfig, updateMemoryReflectionConfig, pilotRunMemoryReflectionConfig } from '@/api/memory'
-import type { ConfigForm, Result, ReflexionData, MemoryVerify, QualityAssessment } from './types'
-import Tag from '@/components/Tag'
+import type { ConfigForm, Result, ReflexionData } from './types'
 import { useI18n } from '@/store/locale';
 import SwitchFormItem from '@/components/FormItem/SwitchFormItem'
 import LabelWrapper from '@/components/FormItem/LabelWrapper'
 import DescWrapper from '@/components/FormItem/DescWrapper'
 import ModelSelect from '@/components/ModelSelect';
+import BtnTabs from '@/components/BtnTabs'

 /** Configuration list */
 const configList = [
@@ -91,6 +92,8 @@ const SelfReflectionEngine: React.FC = () => {
  const { message } = App.useApp();
  const [loading, setLoading] = useState(false)
  const [runLoading, setRunLoading] = useState(false)
+  const [activeTabMap, setActiveTabMap] = useState<Record<number, string>>({});
+  const [expanded, setExpanded] = useState({ conflict: true, quality: true, privacy: true });
  const [result, setResult] = useState<Result | null>(null)
  const { language } = useI18n()

@@ -158,6 +161,8 @@ const SelfReflectionEngine: React.FC = () => {
        })
          .then((res) => {
            setResult(res as Result)
+            setExpanded({ conflict: true, quality: true, privacy: true })
+            setActiveTabMap({})
          })
          .finally(() => {
            setRunLoading(false)
@@ -174,8 +179,8 @@ const SelfReflectionEngine: React.FC = () => {
        <RbCard
          title={t('reflectionEngine.reflectionEngineConfig')}
          extra={<Space>
-            <Button block onClick={handleReset}>{t('common.reset')}</Button>
-            <Button type="primary" loading={loading} block onClick={handleSave}>{t('common.save')}</Button>
+            <Button onClick={handleReset}>{t('common.reset')}</Button>
+            <Button type="primary" loading={loading} onClick={handleSave}>{t('common.save')}</Button>
          </Space>}
          headerType="borderless"
          headerClassName="rb:min-h-[54px]! rb:font-[MiSans-Bold] rb:font-bold"
@@ -253,100 +258,110 @@ const SelfReflectionEngine: React.FC = () => {
        </RbCard>
      </Col>
      <Col span={12} className="rb:h-full!">
-        <Flex gap={16} vertical className="rb:h-full!">
-          <RbCard
-            title={t('memoryExtractionEngine.example')}
-          >
-            <div className="rb:text-[14px] rb:text-[#5B6167] rb:font-regular rb:leading-5 rb:mb-6">
+        <RbCard
+          title={t('memoryExtractionEngine.example')}
+          extra={<Space>
+            <Button type="primary" loading={runLoading} disabled={!values?.reflection_enabled} onClick={handleRun}>{t('reflectionEngine.run')}</Button>
+          </Space>}
+          headerType="borderless"
+          headerClassName="rb:min-h-[54px]! rb:font-[MiSans-Bold] rb:font-bold"
+          className="rb:h-full!"
+          bodyClassName="rb:h-[calc(100%-54px)] rb:overflow-y-auto! rb:p-4! rb:pt-0!"
+        >
+          <Flex vertical gap={12}>
+            <div className="rb:bg-[#F6F6F6] rb:rounded-xl rb:py-2.5 rb:px-3 rb:leading-5.5">
              {t('reflectionEngine.exampleText')}
            </div>

-            <Button type="primary" block loading={runLoading} disabled={!values?.reflection_enabled} onClick={handleRun}>{t('reflectionEngine.run')}</Button>
-          </RbCard>
-          {result && <>
-            <RbCard
-              title={t('reflectionEngine.runTitle')}
-            >
-              <div 
-                className="rb:flex rb:gap-4 rb:justify-start rb:text-[#5B6167] rb:text-[14px] rb:leading-5 rb:mb-3"
-              >
-                <div className="rb:whitespace-nowrap rb:w-45 rb:font-medium">{t(`reflectionEngine.baseline`)}</div>
-                <div className='rb:flex-inline rb:text-left rb:py-px rb:rounded rb:text-[#5B6167] rb:flex-1'>
-                  {result.baseline}
-                </div>
-              </div>
-            </RbCard>
-            {result.reflexion_data.length > 0 && (
-              <RbCard
-                title={t('reflectionEngine.conflictDetection')}
-              >
-                <Space size={12} direction="vertical" className="rb:w-full">
-                  {result.reflexion_data.map((item, index) => (
-                    <div key={index} className="rb:bg-[#F0F3F8] rb:px-3 rb:py-2.5 rb:rounded-md rb:text-[12px]">
-                      {['reason', 'solution'].map(key => (
-                        <div
-                          key={key}
-                          className="rb:flex rb:gap-4 rb:justify-start rb:text-[14px] rb:leading-5 rb:mb-3"
-                        >
-                          <div className="rb:whitespace-nowrap rb:w-45 rb:font-medium">{t(`reflectionEngine.${key}`)}</div>
-                          <div className='rb:flex-inline rb:text-left rb:py-px rb:rounded rb:text-[#5B6167] rb:flex-1'>
-                            {item[key as keyof ReflexionData]}
-                          </div>
-                        </div>
-                      ))}
+            {result && <>
+              <Flex justify="space-between" className="rb:bg-[#F6F6F6] rb:rounded-xl rb:py-2.5! rb:px-3! rb:leading-5">
+                <span className="rb:font-medium rb:text-[#212332]">{t('reflectionEngine.runTitle')}</span>
+                <span className="rb:text-[#5B6167]">{t(`reflectionEngine.baseline`)}: {t(`reflectionEngine.${result.baseline}`)}</span>
+              </Flex>
+
+              {result.reflexion_data.length > 0 &&
+                <Flex vertical gap={12} className="rb:bg-[#F6F6F6] rb:rounded-xl rb:py-2.5! rb:px-3! rb:leading-5.5">
+                  <Flex justify="space-between" className="rb:font-medium rb:text-[#212332] rb:cursor-pointer" onClick={() => setExpanded(p => ({ ...p, conflict: !p.conflict }))}>
+                    {t('reflectionEngine.conflictDetection')}
+                    <div className={clsx("rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/common/arrow_up.svg')] rb:transition-transform", {
+                      'rb:rotate-180': !expanded.conflict,
+                    })}></div>
+                  </Flex>
+
+                  {expanded.conflict && result.reflexion_data.map((item, index) => (
+                    <div key={index} className="rb:bg-white rb:rounded-xl rb:py-2.5! rb:px-3!">
+                      <BtnTabs
+                        className="rb:mb-3!"
+                        variant="outline"
+                        activeKey={activeTabMap[index] ?? 'reason'}
+                        items={['reason', 'solution'].map(key => ({
+                          label: t(`reflectionEngine.${key}`),
+                          key
+                        }))}
+                        onChange={(key) => setActiveTabMap(prev => ({ ...prev, [index]: key }))}
+                      />
+                      <div className="rb:leading-5.5">{item[(activeTabMap[index] ?? 'reason') as keyof ReflexionData]}</div>
                    </div>
                  ))}
-                </Space>
-              </RbCard>
-            )}
-            {result.quality_assessments.length > 0 && (
-              <RbCard
-                title={t('reflectionEngine.qualityAssessment')}
-              >
-                {result.quality_assessments.map((item, index) => (
-                  <div key={index} className="rb:bg-[#F0F3F8] rb:px-3 rb:py-2.5 rb:rounded-md rb:text-[12px]">
-                    {['score', 'summary'].map(key => (
-                      <div
-                        key={key}
-                        className="rb:flex rb:gap-4 rb:justify-start rb:text-[14px] rb:leading-5 rb:mb-3"
-                      >
-                        <div className="rb:whitespace-nowrap rb:w-45 rb:font-medium">{t(`reflectionEngine.qualityAssessmentObj.${key}`)}</div>
-                        <div className='rb:flex-inline rb:text-left rb:py-px rb:rounded rb:text-[#5B6167] rb:flex-1'>
-                          {item[key as keyof QualityAssessment]}
-                        </div>
+
+                </Flex>
+              }
+              {result.quality_assessments.length > 0 &&
+                <Flex vertical gap={12} className="rb:bg-[#F6F6F6] rb:rounded-xl rb:py-2.5! rb:px-3! rb:leading-5.5">
+                  <Flex justify="space-between" className="rb:font-medium rb:text-[#212332] rb:cursor-pointer" onClick={() => setExpanded(p => ({ ...p, quality: !p.quality }))}>
+                    {t('reflectionEngine.qualityAssessment')}
+                    <div className={clsx("rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/common/arrow_up.svg')] rb:transition-transform", {
+                      'rb:rotate-180': !expanded.quality,
+                    })}></div>
+                  </Flex>
+
+                  {expanded.quality && result.quality_assessments.map((item, index) => (
+                    <div key={index} className="rb:bg-white rb:rounded-xl rb:py-2.5! rb:px-3!">
+                      <div>
+                        <span className="rb:font-medium rb:text-[#212332] rb:leading-5 rb:mr-4.5">{t(`reflectionEngine.qualityAssessmentObj.score`)}</span>
+                        <span className="rb:font-[MiSans-Bold] rb:font-bold rb:text-[#155EEF] rb:leading-5">{item.score}</span>
                      </div>
-                    ))}
-                  </div>
-                ))}
-              </RbCard>
-            )}
-            {result.memory_verifies.length > 0 && (
-              <RbCard
-                title={t('reflectionEngine.privacyAudit')}
-              >
-                {result.memory_verifies.map((item, index) => (
-                  <div key={index} className="rb:bg-[#F0F3F8] rb:px-3 rb:py-2.5 rb:rounded-md rb:text-[12px]">
-                    {['has_privacy', 'privacy_types', 'summary'].map(key => (
-                      <div
-                        key={key}
-                        className="rb:flex rb:gap-4 rb:justify-start rb:text-[14px] rb:leading-5 rb:mb-3"
-                      >
-                        <div className="rb:whitespace-nowrap rb:w-45 rb:font-medium">{t(`reflectionEngine.privacyAuditObj.${key}`)}</div>
-                        <div className='rb:flex-inline rb:text-left rb:py-px rb:rounded rb:text-[#5B6167] rb:flex-1'>
-                          {key === 'has_privacy'
-                            ? <Tag color={item[key as keyof MemoryVerify] ? 'success' : 'error'}>{t(`reflectionEngine.privacyAuditObj.${item[key as keyof MemoryVerify]}`)}</Tag>
-                            : key === 'privacy_types' ? (item[key as keyof MemoryVerify] as string[]).join('、')
-                            : item[key as keyof MemoryVerify]
-                          }
-                        </div>
+                      <Divider className="rb:my-3!" />
+                      <div className="rb:font-medium rb:text-[#212332] rb:leading-5 rb:mb-2">{t(`reflectionEngine.qualityAssessmentObj.summary`)}</div>
+                      <div className="rb:mt-1 rb:leading-5.5">{item.summary}</div>
+                    </div>
+                  ))}
+
+                </Flex>
+              }
+              {result.memory_verifies.length > 0 &&
+                <Flex vertical gap={12} className="rb:bg-[#F6F6F6] rb:rounded-xl rb:py-2.5! rb:px-3! rb:leading-5.5">
+                  <Flex justify="space-between" className="rb:font-medium rb:text-[#212332] rb:cursor-pointer" onClick={() => setExpanded(p => ({ ...p, privacy: !p.privacy }))}>
+                    {t('reflectionEngine.privacyAudit')}
+                    <div className={clsx("rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/common/arrow_up.svg')] rb:transition-transform", {
+                      'rb:rotate-180': !expanded.privacy,
+                    })}></div>
+                  </Flex>
+
+                  {expanded.privacy && result.memory_verifies.map((item, index) => (
+                    <div key={index} className="rb:bg-white rb:rounded-xl rb:py-2.5! rb:px-3!">
+                      <div>
+                        <span className="rb:font-medium rb:text-[#212332] rb:leading-5 rb:mr-4.5">{t(`reflectionEngine.privacyAuditObj.has_privacy`)}</span>
+                        <span className="rb:font-[MiSans-Bold] rb:font-bold rb:text-[#155EEF] rb:leading-5">{item.has_privacy}</span>
                      </div>
-                    ))}
-                  </div>
-                ))}
-              </RbCard>
-            )}
-          </>}
-        </Flex>
+
+                      <Divider className="rb:my-3!" />
+
+                      <div className="rb:font-medium rb:text-[#212332] rb:leading-5 rb:mb-2">{t(`reflectionEngine.privacyAuditObj.privacy_types`)}</div>
+                      <div className="rb:mt-1 rb:leading-5.5">{item.privacy_types.join(', ')}</div>
+
+                      <Divider className="rb:my-3!" />
+
+                      <div className="rb:font-medium rb:text-[#212332] rb:leading-5 rb:mb-2">{t(`reflectionEngine.privacyAuditObj.summary`)}</div>
+                      <div className="rb:mt-1 rb:leading-5.5">{item.summary}</div>
+                    </div>
+                  ))}
+
+                </Flex>
+              }
+            </>}
+          </Flex>
+        </RbCard>
      </Col>
    </Row>
  );
--- a/web/src/views/UserMemoryDetail/pages/ExplicitDetail.tsx
+++ b/web/src/views/UserMemoryDetail/pages/ExplicitDetail.tsx
@@ -7,7 +7,8 @@
 import { type FC, useEffect, useState, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useParams } from 'react-router-dom'
-import { Skeleton, Row, Col, Flex } from 'antd'
+import { Skeleton, Row, Col, Flex, DatePicker, Pagination } from 'antd'
+import type { Dayjs } from 'dayjs'
 import * as echarts from 'echarts'
 import 'echarts-wordcloud'

@@ -41,6 +42,7 @@ export interface SemanticMemory {

 /** Combined API response containing both memory categories. */
 interface Data {
+  total: number;
  episodic_memories: EpisodicMemory[];
  semantic_memories: SemanticMemory[]
 }
@@ -71,7 +73,19 @@ const ExplicitDetail: FC = () => {
  /** Keeps a stable reference to the ECharts instance for cleanup. */
  const chartInstance = useRef<echarts.ECharts | null>(null)
  const [loading, setLoading] = useState<boolean>(false)
-  const [data, setData] = useState<Data>({ episodic_memories: [], semantic_memories: [] })
+  const [data, setData] = useState<Data>({ episodic_memories: [], semantic_memories: [], total: 0 })
+  const [dateRange, setDateRange] = useState<[Dayjs | null, Dayjs | null] | null>(null)
+  const [page, setPage] = useState(1)
+  const PAGE_SIZE = 10
+
+  const filteredEpisodic = dateRange?.[0] && dateRange?.[1]
+    ? data.episodic_memories.filter(item => {
+        const ts = item.created_at
+        return ts >= dateRange[0]!.startOf('day').valueOf() && ts <= dateRange[1]!.endOf('day').valueOf()
+      })
+    : data.episodic_memories
+
+  const pagedEpisodic = filteredEpisodic.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE)

  /* Fetch data whenever the route user ID changes. */
  useEffect(() => {
@@ -131,35 +145,77 @@ const ExplicitDetail: FC = () => {
    })
    return () => { chartInstance.current?.dispose(); chartInstance.current = null }
  }, [data.semantic_memories])
+
+  /* Redraw the word cloud when the container dimensions change. */
+  useEffect(() => {
+    const target = wordCloudRef.current?.parentElement
+    if (!target) return
+    const observer = new ResizeObserver(() => {
+      if (!chartInstance.current) return
+      chartInstance.current.resize()
+      chartInstance.current.setOption({ series: [{ type: 'wordCloud' }] })
+    })
+    observer.observe(target)
+    return () => {
+      observer.disconnect()
+      chartInstance.current?.dispose();
+      chartInstance.current = null
+    }
+  }, [])
+
  return (
    <Row gutter={12} className="rb:h-full!">
      <Col span={12} className="rb:h-full!">
        <RbCard
-          title={t('explicitDetail.episodic_memories')}
+          title={() => <span className="rb:font-[MiSans-Bold] rb:font-bold">{t('explicitDetail.episodic_memories')}</span>}
+          extra={<span className="rb:text-[#5B6167]">{t('table.totalRecords', { total: data.total })}</span>}
          headerType="borderless"
-          headerClassName="rb:min-h-[50px]! rb:font-[MiSans-Bold] rb:font-bold"
-          bodyClassName="rb:p-3! rb:pt-0! rb:h-[calc(100%-50px)] rb:overflow-y-auto!"
+          headerClassName="rb:min-h-[50px]!"
+          bodyClassName="rb:p-3! rb:pt-0! rb:h-[calc(100%-50px)]"
          className="rb:h-full!"
        >
          {loading ?
            <Skeleton active />
-            : data.episodic_memories?.length > 0 ? (
-              <Flex gap={12} vertical>
-                {data.episodic_memories.map(item => (
-                  <div
-                    key={item.id}
-                    className="rb:cursor-pointer rb:bg-[#F6F6F6] rb:rounded-xl rb:pt-2.5 rb:px-3 rb:pb-3"
-                    onClick={() => handleView(item)}
-                  >
-                    <Flex align="center" justify="space-between">
-                      <span className="rb:font-medium rb:pl-1">{item.title}</span>
-                      <div className="rb:textt-[#5B6167] rb:leading-4.25 rb:text-[12px]">{formatDateTime(item.created_at)}</div>
-                    </Flex>
-                    <div className="rb:bg-white rb:rounded-lg rb:py-2.5 rb:px-3 rb:mt-2.5 rb:leading-5">{item.content}</div>
-                  </div>
-                ))}
+            : (
+              <Flex gap={12} vertical className="rb:h-full!">
+                <Row gutter={12}>
+                  <Col span={12}>
+                    <DatePicker.RangePicker
+                      value={dateRange}
+                      onChange={(val) => { setDateRange(val); setPage(1) }}
+                      allowClear
+                    />
+                  </Col>
+                </Row>
+                <div className="rb:max-h-[calc(100%-92px)] rb:overflow-y-auto">
+                  {pagedEpisodic.length > 0 ? pagedEpisodic.map(item => (
+                    <div
+                      key={item.id}
+                      className="rb:cursor-pointer rb:bg-[#F6F6F6] rb:rounded-xl rb:pt-2.5 rb:px-3 rb:pb-3"
+                      onClick={() => handleView(item)}
+                    >
+                      <Flex align="center" justify="space-between">
+                        <span className="rb:font-medium rb:pl-1">{item.title}</span>
+                        <div className="rb:text-[#5B6167] rb:leading-4.25 rb:text-[12px]">{formatDateTime(item.created_at)}</div>
+                      </Flex>
+                      <div className="rb:bg-white rb:rounded-lg rb:py-2.5 rb:px-3 rb:mt-2.5 rb:leading-5">{item.content}</div>
+                    </div>
+                  )) : <Empty />}
+                </div>
+                {filteredEpisodic.length > PAGE_SIZE && (
+                  <Pagination
+                    current={page}
+                    pageSize={PAGE_SIZE}
+                    total={filteredEpisodic.length}
+                    onChange={setPage}
+                    size="small"
+                    showSizeChanger={true}
+                    showQuickJumper={true}
+                    className="rb:mt-1!"
+                  />
+                )}
              </Flex>
-            ) : <Empty />
+            )
          }
        </RbCard>
      </Col>
--- a/web/src/views/UserMemoryDetail/pages/WorkingDetail.tsx
+++ b/web/src/views/UserMemoryDetail/pages/WorkingDetail.tsx
@@ -197,7 +197,7 @@ const WorkingDetail: FC = () => {
              </RbCard>
            </Col>
            {selected && <>
-              <Col flex="auto" className="rb:h-full!">
+              <Col flex="1" className="rb:h-full!">
                <RbCard
                  title={selected.title}
                  headerType="borderless"