Merge #20 into develop_web from feature/20251219_zy

feat(web): remove mock data * feature/20251219_zy: (5 commits) feat(web): update api key feat(web): Add Emotion Memory feat(web): Add Reflection Engine feat(web): Add Reflection Engine API feat(web): remove mock data Signed-off-by: zhaoying <zhaoying@redbearai.com> Merged-by: zhaoying <zhaoying@redbearai.com> CR-link: https://codeup.aliyun.com/redbearai/python/redbear-mem-open/change/20
2025-12-19 18:55:33 +08:00
parent 6cd436d9b8 eaa47ad9f1
commit 54c2c8f74f
23 changed files with 2168 additions and 155 deletions
--- a/web/src/views/ApplicationConfig/Api.tsx
+++ b/web/src/views/ApplicationConfig/Api.tsx
@@ -171,9 +171,6 @@ const Api: FC<{ application: Application | null }> = ({ application }) => {
                <Col span={8}>
                  <Statistic valueStyle={{ fontSize: '18px' }} title={t('application.apiKeyRequestTotal')} value={item.total_requests} />
                </Col>
-                <Col span={8}>
-                  <Statistic valueStyle={{ fontSize: '18px' }} title={t('application.qps')} value={item.quota_used} />
-                </Col>
                <Col span={8}>
                  <Statistic valueStyle={{ fontSize: '18px' }} title={t('application.qpsLimit')} value={item.rate_limit} />
                </Col>
--- a/web/src/views/ApplicationConfig/components/ApiKeyConfigModal.tsx
+++ b/web/src/views/ApplicationConfig/components/ApiKeyConfigModal.tsx
@@ -46,7 +46,9 @@ const ApiKeyConfigModal = forwardRef<ApiKeyConfigModalRef, ApiKeyConfigModalProp
          ...values
        })
        handleClose()
-        refresh()
+        setTimeout(() => {
+          refresh()
+        }, 50)
      })
  }

--- a/web/src/views/ApplicationManagement/components/ApplicationModal.tsx
+++ b/web/src/views/ApplicationManagement/components/ApplicationModal.tsx
@@ -69,7 +69,7 @@ const ApplicationModal = forwardRef<ApplicationModalRef, ApplicationModalProps>(
        const response = editVo?.id ? updateApplication(editVo.id, {
          ...editVo,
          ...values,
-        } as Application) : addApplication(values as Application)
+        }) : addApplication(values)
        response.then(() => {
          refresh()
          handleClose()
@@ -127,7 +127,6 @@ const ApplicationModal = forwardRef<ApplicationModalRef, ApplicationModalProps>(
              label: t(`application.${type}`),
              labelDesc: t(`application.${type}Desc`),
              icon: typeIcons[type],
-              disabled: editVo?.id || type === 'workflow'
            }))}
          />
        </FormItem>
--- a/web/src/views/EmotionEngine/index.tsx
+++ b/web/src/views/EmotionEngine/index.tsx
@@ -0,0 +1,252 @@
+import React, { useState, useEffect } from 'react';
+import { Row, Col, Form, Slider, Button, Alert, message, Switch, Space } from 'antd';
+import { useParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import RbCard from '@/components/RbCard/Card';
+import strategyImpactSimulator from '@/assets/images/memory/strategyImpactSimulator.svg'
+import { getMemoryEmotionConfig, updateMemoryEmotionConfig } from '@/api/memory'
+import type { ConfigForm } from './types'
+import CustomSelect from '@/components/CustomSelect';
+import { getModelListUrl } from '@/api/models'
+import Tag from '@/components/Tag'
+
+const configList = [
+  {
+    key: 'emotion_enabled',
+    type: 'switch',
+  },
+  {
+    key: 'emotion_model_id',
+    type: 'customSelect',
+    url: getModelListUrl,
+    params: { type: 'chat,llm', page: 1, pagesize: 100 }, // chat,llm
+  },
+  {
+    key: 'emotion_min_intensity',
+    type: 'slider',
+    min: 0,
+    max: 1,
+    step: 0.05
+  },
+  {
+    key: 'emotion_extract_keywords',
+    type: 'switch',
+    hasSubTitle: true
+  },
+  {
+    key: 'emotion_enable_subject',
+    type: 'switch',
+    hasSubTitle: true
+  },
+]
+
+const EmotionEngine: React.FC = () => {
+  const { t } = useTranslation();
+  const { id } = useParams();
+  const [configData, setConfigData] = useState<ConfigForm>({} as ConfigForm);
+  const [form] = Form.useForm<ConfigForm>();
+  const [messageApi, contextHolder] = message.useMessage();
+  const [loading, setLoading] = useState(false)
+
+  const values = Form.useWatch([], form);
+
+  useEffect(() => {
+    getConfigData()
+  }, [id])
+
+  const getConfigData = () => {
+    if (!id) {
+      return
+    }
+    getMemoryEmotionConfig(id)
+      .then((res) => {
+        const response = res as ConfigForm
+        const initialValues = {
+          ...response,
+        }
+        setConfigData(initialValues);
+        form.setFieldsValue(initialValues);
+      })
+      .catch(() => {
+        console.error('Failed to load data');
+      })
+  }
+  const handleReset = () => {
+    form.setFieldsValue(configData);
+  }
+  const handleSave = () => {
+    if (!id) {
+      return
+    }
+    setLoading(true)
+    updateMemoryEmotionConfig({
+      ...values,
+      config_id: id
+    })
+      .then(() => {
+        messageApi.success(t('common.saveSuccess'))
+        setConfigData({...(values || {})})
+      })
+      .finally(() => {
+        setLoading(false)
+      })
+  }
+
+  return (
+    <Row gutter={[16, 16]}>
+      <Col span={12}>
+        <RbCard 
+          title={
+            <div className="rb:flex rb:items-center">
+              <img src={strategyImpactSimulator} className="rb:w-5 rb:h-5 rb:mr-2" />
+              {t('emotionEngine.emotionEngineConfig')}
+            </div>
+          }
+        >
+          <Form 
+            form={form}
+            layout="vertical"
+            initialValues={{
+              offset: 0,
+              lambda_time: 0.03,
+              lambda_mem: 0.03,
+            }}
+          >
+            {configList.map(config => {
+              if (config.type === 'slider') {
+                return (
+                  <div key={config.key} className=" rb:mb-6">
+                    <div className="rb:text-[14px] rb:font-medium rb:leading-5 rb:mb-2">
+                      {t(`emotionEngine.${config.key}`)}
+                    </div>
+                    <div className="rb:mt-1 rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-4 ">
+                      {t(`emotionEngine.${config.key}_desc`)}
+                    </div>
+                    <Form.Item
+                      name={config.key}
+                    >
+                      <Slider
+                        disabled={!values?.emotion_enabled && config.key !== 'emotion_enabled'}
+                        tooltip={{ open: false }} max={config.max} min={config.min} step={config.step} style={{ margin: '0' }} />
+                    </Form.Item>
+                    <div className="rb:flex rb:text-[12px] rb:items-center rb:justify-between rb:text-[#5B6167] rb:leading-5 rb:-mt-6.5">
+
+                      <>{t('emotionEngine.currentValue')}: {values?.[config.key as keyof ConfigForm] || 0}</>
+                    </div>
+                  </div>
+                )
+              }
+              if (config.type === 'customSelect') {
+                return (
+                  <div key={config.key}>
+                    <div className="rb:text-[14px] rb:font-medium rb:leading-5 rb:mb-2">
+                      {t(`emotionEngine.${config.key}`)}
+                    </div>
+                    <Form.Item
+                      name={config.key}
+                      extra={t(`emotionEngine.${config.key}_desc`)}
+                    >
+                      <CustomSelect
+                        url={config.url as string}
+                        params={config.params}
+                        valueKey='id'
+                        labelKey='name'
+                        hasAll={false}
+                        disabled={!values?.emotion_enabled && config.key !== 'emotion_enabled'}
+                      />
+                    </Form.Item>
+                  </div>
+                )
+              }
+
+              return (
+                <div className="rb:flex rb:items-center rb:justify-between rb:mb-6">
+                  <div>
+                    <span className="rb:text-[14px] rb:font-medium rb:leading-5">{t(`emotionEngine.${config.key}`)}</span>
+                    {config.hasSubTitle && <div className="rb:mt-1 rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-4">{t(`emotionEngine.${config.key}_subTitle`)}</div>}
+                    <div className="rb:mt-1 rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-4">{t(`emotionEngine.${config.key}_desc`)}</div>
+                  </div>
+                  <Form.Item
+                    name={config.key}
+                    valuePropName="checked"
+                    className="rb:ml-2 rb:mb-0!"
+                  >
+                    <Switch
+                      disabled={!values?.emotion_enabled && config.key !== 'emotion_enabled'} />
+                  </Form.Item>
+                </div>
+              )
+            })}
+            <Row gutter={16} className="rb:mt-3">
+              <Col span={12}>
+                <Button block onClick={handleReset}>{t('common.reset')}</Button>
+              </Col>
+              <Col span={12}>
+                <Button type="primary" loading={loading} block onClick={handleSave}>{t('common.save')}</Button>
+              </Col>
+            </Row>
+          </Form>
+        </RbCard>
+      </Col>
+      <Col span={12}>
+        <RbCard
+          title={t('emotionEngine.emotion_min_intensity_description')}
+        >
+          <div className="rb:font-medium">{t('emotionEngine.question')}</div>
+          <div className="rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-4 rb:mt-2">{t('emotionEngine.answer')}</div>
+          <div className="rb:font-medium rb:mt-4 rb:mb-2">{t('emotionEngine.differentTitle')}</div>
+
+          <Space size={16} direction="vertical" className="rb:w-full">
+            {['low', 'middle', 'high'].map((key, index) => (
+              <Alert
+                key={key} 
+                type={(['warning', 'info', 'success'] as const)[index] as 'warning' | 'info' | 'success'}
+                message={
+                  <div>
+                    <div className="rb:w-full rb:font-medium rb:flex rb:justify-between">
+                      {t(`emotionEngine.${key}_title`)}
+                      <Tag color={(['warning', 'processing', 'success'] as const)[index] as 'warning' | 'processing' | 'success'}>{t(`emotionEngine.${key}_tag`)}</Tag>
+                    </div>
+                    <Space size={8} direction="vertical" className="rb:w-full rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-4">
+                      <div><span className="rb:font-medium">{t('emotionEngine.advantage')}: </span>{t(`emotionEngine.${key}_advantage`)}</div>
+                      <div><span className="rb:font-medium">{t('emotionEngine.shortcoming')}: </span>{t(`emotionEngine.${key}_shortcoming`)}</div>
+                      <div><span className="rb:font-medium">{t('emotionEngine.scene')}: </span>{t(`emotionEngine.${key}_scene`)}</div>
+                    </Space>
+                  </div>
+                }
+              />
+            ))}
+          </Space>
+
+          <div className="rb:font-medium rb:mt-6 rb:mb-3">{t('emotionEngine.configSuggest')}</div>
+          <Space size={12} direction="vertical" className="rb:w-full">
+            {['first', 'customer_service', 'data_analysis', 'risk_warning'].map(key => (
+              <div className="rb:bg-[#F0F3F8] rb:px-3 rb:py-2.5 rb:rounded-md rb:text-[12px]">{t(`emotionEngine.${key}`)}: {t(`emotionEngine.${key}_desc`)}</div>
+            ))}
+          </Space>
+
+          <div className="rb:font-medium rb:mt-6 rb:mb-3">{t('emotionEngine.actual_case')}</div>
+          <Space size={12} direction="vertical" className="rb:w-full rb:bg-[#F0F3F8] rb:px-3 rb:py-2.5 rb:rounded-md">
+            <div className="rb:bg-white rb:px-3 rb:py-2.5 rb:rounded-md">
+              <span className="rb:font-medium">{t('emotionEngine.user_input')}: </span>
+              {t('emotionEngine.user_input_message')}
+            </div>
+            {['neutral_emotion', 'minor_dissatisfaction', 'expect_improvement'].map((key, index) => (
+              <div className="rb:flex rb:items-center rb:justify-between rb:bg-white rb:px-3 rb:py-2.5 rb:rounded-md">
+                <div className="rb:w-[50%] rb:flex rb:items-center rb:justify-between rb:text-[12px]">
+                  {t(`emotionEngine.${key}`)}
+                  <span>{t('emotionEngine.confidence')}: {key === 'neutral_emotion' ? 0.85 : key === 'minor_dissatisfaction' ? 0.45 : 0.32}</span>
+                </div>
+                
+                <Tag color={(['success', 'warning', 'processing'] as const)[index] as 'warning' | 'processing' | 'success'}>{t(`emotionEngine.${key}_tag`)}</Tag>
+              </div>
+            ))}
+            </Space>
+        </RbCard>
+      </Col>
+      {contextHolder}
+    </Row>
+  );
+};
+
+export default EmotionEngine;
--- a/web/src/views/EmotionEngine/types.ts
+++ b/web/src/views/EmotionEngine/types.ts
@@ -0,0 +1,48 @@
+// 标签表单数据类型
+export interface TagFormData {
+  tagName: string;
+  type: string;
+  color: string;
+  description?: string;
+  applicableScope?: string[];
+  semanticExpansion?: string;
+  isActive?: boolean;
+  // 扩展字段用于区分编辑和新增操作
+  isEditing?: boolean;
+  tagId?: string;
+}
+
+// 记忆总览数据类型
+export interface MemoryOverviewRecord {
+  id: number;
+  memoryID: string,
+  contentSummary: string;
+  type: string;
+  createTime: string;
+  lastCallTime: string;
+  retentionDegree: string;
+  status: string;
+}
+// 定义组件暴露的方法接口
+export interface MemoryOverviewFormRef {
+  handleOpen: (memoryOverview?: MemoryOverviewRecord | null) => void;
+}
+
+// 遗忘曲线数据类型
+export interface CurveRecord {
+  memoryID: string;
+  type: string;
+  currentRetentionRate: string;
+  finallyActivated: string;
+  expectedForgettingTime: string;
+  reinforcementCount: string;
+}
+
+export interface ConfigForm {
+  config_id: number | string;
+  emotion_enabled: boolean;
+  emotion_model_id: string;
+  emotion_extract_keywords: boolean;
+  emotion_min_intensity: number;
+  emotion_enable_subject: boolean;
+}
--- a/web/src/views/MemoryExtractionEngine/constant.ts
+++ b/web/src/views/MemoryExtractionEngine/constant.ts
@@ -152,7 +152,7 @@ export const configList: ConfigVo[] = [
      },
      // 自我反思引擎
      // {
-      //   title: 'selfReflexionEngine',
+      //   title: 'reflectionEngine',
      //   list: [
      //     // 是否启用反思引擎
      //     {
--- a/web/src/views/MemoryManagement/index.tsx
+++ b/web/src/views/MemoryManagement/index.tsx
@@ -1,11 +1,11 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { List, Button, Space, App } from 'antd';
+import { List, Button, Space, App, Tooltip } from 'antd';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import MemoryForm from './components/MemoryForm';
 import type { Memory, MemoryFormRef } from '@/views/MemoryManagement/types'
 import RbCard from '@/components/RbCard/Card'
-import StatusTag from '@/components/StatusTag'
+// import StatusTag from '@/components/StatusTag'
 import { getMemoryConfigList, deleteMemoryConfig } from '@/api/memory'
 import BodyWrapper from '@/components/Empty/BodyWrapper'
 import { formatDateTime } from '@/utils/format';
@@ -67,12 +67,18 @@ const MemoryManagement: React.FC = () => {
      case 'forgottenEngine':
        navigate(`/forgetting-engine/${id}`)
        break
+      case 'emotionEngine':
+        navigate(`/emotion-engine/${id}`)
+        break;
+      case 'reflectionEngine':
+        navigate(`/reflection-engine/${id}`)
+        break;
    }
  }

  return (
    <>
-      <div className="rb:text-right rb:mb-[16px]">
+      <div className="rb:text-right rb:mb-4">
        <Button type="primary" onClick={() => handleEdit()}>
          {t('memory.createConfiguration')}
        </Button>
@@ -80,7 +86,7 @@ const MemoryManagement: React.FC = () => {
      
      <BodyWrapper loading={loading} empty={data.length === 0}>
        <List
-          grid={{ gutter: 16, column: 3 }}
+          grid={{ gutter: 16, column: 2 }}
          loading={loading}
          dataSource={data}
          renderItem={(item) => (
@@ -88,32 +94,37 @@ const MemoryManagement: React.FC = () => {
              <RbCard 
                title={item.config_name}
              >
-                <div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-[17px] rb:font-regular rb:mt-[-4px]">{item.config_desc}</div>
-                {['memoryExtractionEngine', 'forgottenEngine'].map((key) => (
-                  <div key={key} className="rb:group rb:cursor-pointer rb:bg-[#F0F3F8] rb:h-[40px] rb:rounded-[6px] rb:flex rb:items-center rb:justify-between rb:p-[0_8px_0_12px] rb:mt-[12px] rb:text-[#5B6167] rb:font-medium"
-                    onClick={() => handleClick(item.config_id, key)}
-                  >
-                    {t(`memory.${key}`)}
-                    <span className='rb:flex rb:items-center rb:justify-end'>
-                      {/* <StatusTag status={item[key] === 'active' ? 'success' : 'error'} text={item[key] === 'active' ? t('memory.active') : t('memory.inactive')} /> */}
-                      <div 
-                        className="rb:w-[16px] rb:h-[16px] rb:ml-[-3px] rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/memory/arrow_right.svg')] rb:group-hover:bg-[url('@/assets/images/memory/arrow_right_hover.svg')]" 
-                      ></div>
-                    </span>
-                  </div>
-                ))}
-                <div className={clsx("rb:mt-[16px] rb:text-[12px] rb:leading-[16px] rb:font-regular rb:text-[#5B6167] rb:flex rb:items-center", {
+                <Tooltip title={item.config_desc}>
+                  <div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4.25 rb:font-regular rb:-mt-1 rb:wrap-break-word rb:line-clamp-1">{item.config_desc}</div>
+                </Tooltip>
+
+                <div className="rb:grid rb:grid-cols-2 rb:gap-4 rb:mt-3">
+                  {['memoryExtractionEngine', 'forgottenEngine', 'emotionEngine', 'reflectionEngine'].map((key) => (
+                    <div key={key} className="rb:group rb:cursor-pointer rb:bg-[#F0F3F8] rb:h-10 rb:rounded-md rb:flex rb:items-center rb:justify-between rb:p-[0_8px_0_12px] rb:mt-3 rb:text-[#5B6167] rb:font-medium"
+                      onClick={() => handleClick(item.config_id, key)}
+                    >
+                      {t(`memory.${key}`)}
+                      <span className='rb:flex rb:items-center rb:justify-end'>
+                        {/* <StatusTag status={item[key] === 'active' ? 'success' : 'error'} text={item[key] === 'active' ? t('memory.active') : t('memory.inactive')} /> */}
+                        <div 
+                          className="rb:w-4 rb:h-4 rb:-ml-0.75 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/memory/arrow_right.svg')] rb:group-hover:bg-[url('@/assets/images/memory/arrow_right_hover.svg')]" 
+                        ></div>
+                      </span>
+                    </div>
+                  ))}
+                </div>
+                <div className={clsx("rb:mt-4 rb:text-[12px] rb:leading-4 rb:font-regular rb:text-[#5B6167] rb:flex rb:items-center", {
                  'rb:justify-between': item.updated_at,
                  'rb:justify-end': !item.updated_at
                })}>
                  {formatDateTime(item.updated_at, 'YYYY-MM-DD HH:mm:ss')}
                  <Space size={16}>
                    <div 
-                      className="rb:w-[20px] rb:h-[20px] rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/edit.svg')] rb:hover:bg-[url('@/assets/images/edit_hover.svg')]" 
+                      className="rb:w-5 rb:h-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/edit.svg')] rb:hover:bg-[url('@/assets/images/edit_hover.svg')]" 
                      onClick={() => handleEdit(item)}
                    ></div>
                    <div 
-                      className="rb:w-[20px] rb:h-[20px] rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/delete.svg')] rb:hover:bg-[url('@/assets/images/delete_hover.svg')]" 
+                      className="rb:w-5 rb:h-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/delete.svg')] rb:hover:bg-[url('@/assets/images/delete_hover.svg')]" 
                      onClick={() => handleDelete(item)}
                    ></div>
                  </Space>
--- a/web/src/views/SelfReflectionEngine/index.tsx
+++ b/web/src/views/SelfReflectionEngine/index.tsx
@@ -0,0 +1,332 @@
+import React, { useState, useEffect } from 'react';
+import { Row, Col, Form, App, Button, Switch, Space, Select } from 'antd';
+import { useParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import RbCard from '@/components/RbCard/Card';
+import strategyImpactSimulator from '@/assets/images/memory/strategyImpactSimulator.svg'
+import { getMemoryReflectionConfig, updateMemoryReflectionConfig, pilotRunMemoryReflectionConfig } from '@/api/memory'
+import type { ConfigForm, Result, ReflexionData, MemoryVerify, QualityAssessment } from './types'
+import CustomSelect from '@/components/CustomSelect';
+import { getModelListUrl } from '@/api/models'
+import Tag from '@/components/Tag'
+
+const configList = [
+  // 启用反思引擎
+  {
+    key: 'reflection_enabled',
+    type: 'switch',
+  },
+  // 反思模型
+  {
+    key: 'reflection_model_id',
+    type: 'customSelect',
+    url: getModelListUrl,
+    params: { type: 'chat,llm', page: 1, pagesize: 100 }, // chat,llm
+  },
+  // 迭代周期
+  {
+    key: 'reflection_period_in_hours',
+    type: 'select',
+    options: [
+      { label: 'oneHour', value: '1' },
+      { label: 'threeHours', value: '3' },
+      { label: 'sixHours', value: '6' },
+      { label: 'twelveHours', value: '12' },
+      { label: 'daily', value: '24' },
+    ],
+  },
+  // 反思范围
+  {
+    key: 'reflexion_range',
+    type: 'select',
+    hiddenDesc: true,
+    options: [
+      { label: 'partial', value: 'partial' },
+      { label: 'all', value: 'all' },
+    ],
+  },
+  // 反思基线
+  {
+    key: 'baseline',
+    type: 'select',
+    hiddenDesc: true,
+    options: [
+      { label: 'TIME', value: 'TIME' },
+      { label: 'FACT', value: 'FACT' },
+      { label: 'HYBRID', value: 'HYBRID' },
+    ],
+  },
+  // 质量评估
+  {
+    key: 'quality_assessment',
+    type: 'switch',
+  },
+  // 质量评估
+  {
+    key: 'memory_verify',
+    type: 'switch',
+  },
+]
+
+const SelfReflectionEngine: React.FC = () => {
+  const { t } = useTranslation();
+  const { id } = useParams();
+  const [configData, setConfigData] = useState<ConfigForm>({} as ConfigForm);
+  const [form] = Form.useForm<ConfigForm>();
+  const { message } = App.useApp();
+  const [loading, setLoading] = useState(false)
+  const [runLoading, setRunLoading] = useState(false)
+  const [result, setResult] = useState<Result | null>(null)
+
+  const values = Form.useWatch([], form);
+
+  useEffect(() => {
+    getConfigData()
+  }, [id])
+
+  const getConfigData = () => {
+    if (!id) {
+      return
+    }
+    getMemoryReflectionConfig(id)
+      .then((res) => {
+        const response = res as ConfigForm
+        const initialValues = {
+          ...response,
+        }
+        console.log('initialValues', initialValues)
+        setConfigData(initialValues);
+        form.setFieldsValue(initialValues);
+      })
+      .catch(() => {
+        console.error('Failed to load data');
+      })
+  }
+  const handleReset = () => {
+    form.setFieldsValue(configData);
+  }
+  const handleSave = () => {
+    if (!id) {
+      return
+    }
+    setLoading(true)
+    updateMemoryReflectionConfig({
+      ...values,
+      config_id: id
+    })
+      .then(() => {
+        message.success(t('common.saveSuccess'))
+        setConfigData({...(values || {})})
+      })
+      .finally(() => {
+        setLoading(false)
+      })
+  }
+  const handleRun = () => {
+    if (!id) {
+      return
+    }
+    setRunLoading(true)
+    pilotRunMemoryReflectionConfig({
+      config_id: id,
+      dialogue_text: t('reflectionEngine.exampleText')
+    })
+      .then((res) => {
+        setResult(res as Result)
+      })
+      .finally(() => {
+        setRunLoading(false)
+      })
+  }
+
+  return (
+    <Row gutter={[16, 16]}>
+      <Col span={12}>
+        <RbCard 
+          title={
+            <div className="rb:flex rb:items-center">
+              <img src={strategyImpactSimulator} className="rb:w-5 rb:h-5 rb:mr-2" />
+              {t('reflectionEngine.reflectionEngineConfig')}
+            </div>
+          }
+        >
+          <Form 
+            form={form}
+            layout="vertical"
+            initialValues={{
+              offset: 0,
+              lambda_time: 0.03,
+              lambda_mem: 0.03,
+            }}
+          >
+            {configList.map(config => {
+              if (config.type === 'customSelect') {
+                return (
+                  <div key={config.key}>
+                    <div className="rb:text-[14px] rb:font-medium rb:leading-5 rb:mb-2">
+                      {t(`reflectionEngine.${config.key}`)}
+                    </div>
+                    <Form.Item
+                      name={config.key}
+                      extra={t(`reflectionEngine.${config.key}_desc`)}
+                    >
+                      <CustomSelect
+                        url={config.url as string}
+                        params={config.params}
+                        valueKey='id'
+                        labelKey='name'
+                        hasAll={false}
+                        placeholder={t('common.pleaseSelect')}
+                        disabled={!values?.reflection_enabled && config.key !== 'reflection_enabled'}
+                      />
+                    </Form.Item>
+                  </div>
+                )
+              }
+              if (config.type === 'select') {
+                return (
+                  <div key={config.key}>
+                    <div className="rb:text-[14px] rb:font-medium rb:leading-5 rb:mb-2">
+                      {t(`reflectionEngine.${config.key}`)}
+                    </div>
+                    <Form.Item
+                      name={config.key}
+                      extra={t(`reflectionEngine.${config.key}_desc`)}
+                    >
+                      <Select
+                        options={config.options?.map(vo => ({
+                          ...vo,
+                          label: t(`reflectionEngine.${vo.label}`),
+                        }))}
+                        placeholder={t('common.pleaseSelect')}
+                        disabled={!values?.reflection_enabled && config.key !== 'reflection_enabled'}
+                      />
+                    </Form.Item>
+                  </div>
+                )
+              }
+
+              return (
+                <div className="rb:flex rb:items-center rb:justify-between rb:mb-6">
+                  <div>
+                    <span className="rb:text-[14px] rb:font-medium rb:leading-5">{t(`reflectionEngine.${config.key}`)}</span>
+                    {(config as any).hasSubTitle && <div className="rb:mt-1 rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-4">{t(`reflectionEngine.${config.key}_subTitle`)}</div>}
+                    <div className="rb:mt-1 rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-4">{t(`reflectionEngine.${config.key}_desc`)}</div>
+                  </div>
+                  <Form.Item
+                    name={config.key}
+                    valuePropName="checked"
+                    className="rb:ml-2 rb:mb-0!"
+                  >
+                    <Switch
+                      disabled={!values?.reflection_enabled && config.key !== 'reflection_enabled'} />
+                  </Form.Item>
+                </div>
+              )
+            })}
+            <Row gutter={16} className="rb:mt-3">
+              <Col span={12}>
+                <Button block onClick={handleReset}>{t('common.reset')}</Button>
+              </Col>
+              <Col span={12}>
+                <Button type="primary" loading={loading} block onClick={handleSave}>{t('common.save')}</Button>
+              </Col>
+            </Row>
+          </Form>
+        </RbCard>
+      </Col>
+      <Col span={12}>
+        <Space size={16} direction="vertical" className="rb:w-full">
+          <RbCard
+            title={t('memoryExtractionEngine.example')}
+          >
+            <div className="rb:text-[14px] rb:text-[#5B6167] rb:font-regular rb:leading-5 rb:mb-6">
+              {t('reflectionEngine.exampleText')}
+            </div>
+
+            <Button type="primary" block loading={runLoading} 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-20 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>
+            <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-20 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>
+                    ))}
+                  </div>
+                ))}
+              </Space>
+            </RbCard>
+            <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-20 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>
+                    </div>
+                  ))}
+                </div>
+              ))}
+            </RbCard>
+            <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-20 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>
+                    </div>
+                  ))}
+                </div>
+              ))}
+            </RbCard>
+          </>}
+        </Space>
+      </Col>
+    </Row>
+  );
+};
+
+export default SelfReflectionEngine;
--- a/web/src/views/SelfReflectionEngine/types.ts
+++ b/web/src/views/SelfReflectionEngine/types.ts
@@ -0,0 +1,72 @@
+// 标签表单数据类型
+export interface TagFormData {
+  tagName: string;
+  type: string;
+  color: string;
+  description?: string;
+  applicableScope?: string[];
+  semanticExpansion?: string;
+  isActive?: boolean;
+  // 扩展字段用于区分编辑和新增操作
+  isEditing?: boolean;
+  tagId?: string;
+}
+
+// 记忆总览数据类型
+export interface MemoryOverviewRecord {
+  id: number;
+  memoryID: string,
+  contentSummary: string;
+  type: string;
+  createTime: string;
+  lastCallTime: string;
+  retentionDegree: string;
+  status: string;
+}
+// 定义组件暴露的方法接口
+export interface MemoryOverviewFormRef {
+  handleOpen: (memoryOverview?: MemoryOverviewRecord | null) => void;
+}
+
+// 遗忘曲线数据类型
+export interface CurveRecord {
+  memoryID: string;
+  type: string;
+  currentRetentionRate: string;
+  finallyActivated: string;
+  expectedForgettingTime: string;
+  reinforcementCount: string;
+}
+
+export interface ConfigForm {
+  config_id: number | string;
+  reflection_enabled: boolean;
+  reflection_period_in_hours: string;
+  reflexion_range: string;
+  baseline: string;
+  reflection_model_id: string;
+  memory_verify: boolean;
+  quality_assessment: boolean;
+}
+
+export interface QualityAssessment {
+  score: number;
+  summary: string;
+}
+export interface MemoryVerify {
+  has_privacy: boolean;
+  privacy_types: string[];
+  summary: string;
+}
+export interface ReflexionData {
+  reason: string;
+  solution: string;
+}
+
+export interface Result {
+  baseline: string;
+  source_data: string;
+  quality_assessments: QualityAssessment[];
+  memory_verifies: MemoryVerify[];
+  reflexion_data: ReflexionData[]
+}
--- a/web/src/views/UserMemoryDetail/Neo4j.tsx
+++ b/web/src/views/UserMemoryDetail/Neo4j.tsx
@@ -18,6 +18,11 @@ import RelationshipNetwork from './components/RelationshipNetwork'
 import MemoryInsight from './components/MemoryInsight'
 import Empty from '@/components/Empty'

+import WordCloud from './components/WordCloud'
+import EmotionTags from './components/EmotionTags'
+import Health from './components/Health'
+import Suggestions from './components/Suggestions'
+
 const tagColors = ['21, 94, 239', '156, 111, 255', '255, 93, 52', '54, 159, 33']

 interface TitleProps {
@@ -102,77 +107,85 @@ const Neo4j: FC = () => {

  const name = loading.detail ? '' : data?.name && data?.name !== '' ? data.name : id
  return (
-    <Row gutter={[16, 16]} className="rb:pb-[24px]">
+    <Row gutter={[16, 16]} className="rb:pb-6">
      <Col span={8}>
-        <RbCard>
-          <div className="rb:flex rb:items-center">
-            <div className="rb:flex-[0_0_auto] rb:w-[80px] rb:h-[80px] rb:text-center rb:font-semibold rb:text-[28px] rb:leading-[80px] rb:rounded-[8px] rb:text-[#FBFDFF] rb:bg-[#155EEF]">{name?.[0]}</div>
-            <div className="rb:text-[24px] rb:font-semibold rb:leading-[32px] rb:ml-[16px]">
-              {name}<br/>
-              <div className="rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-[16px] rb:mt-[8px]">{data?.tags?.join(' | ')}</div>
-            </div>
-          </div>

-          <div className="rb:flex rb:gap-[8px] rb:mb-[8px] rb:flex-wrap rb:mt-[25px]">
-            {data?.hot_tags?.map((tag, tagIndex) => (
-              <span key={tag} className="rb:rounded-[11px] rb:p-[0_8px] rb:leading-[22px] rb:border"
-                style={{
-                  backgroundColor: `rgba(${tagColors[tagIndex % tagColors.length]}, 0.08)`,
-                  borderColor: `rgba(${tagColors[tagIndex % tagColors.length]}, 0.3)`,
-                  color: `rgba(${tagColors[tagIndex % tagColors.length]}, 1)`,
-                }}
-              >
-                {tag.name}({tag.frequency})
-              </span>
-            ))}
-          </div>
+        <Row gutter={[16, 16]}>
+          <Col span={24}>
+            <RbCard>
+              <div className="rb:flex rb:items-center">
+                <div className="rb:flex-[0_0_auto] rb:w-[80px] rb:h-[80px] rb:text-center rb:font-semibold rb:text-[28px] rb:leading-[80px] rb:rounded-[8px] rb:text-[#FBFDFF] rb:bg-[#155EEF]">{name?.[0]}</div>
+                <div className="rb:text-[24px] rb:font-semibold rb:leading-[32px] rb:ml-[16px]">
+                  {name}<br/>
+                  <div className="rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-[16px] rb:mt-[8px]">{data?.tags?.join(' | ')}</div>
+                </div>
+              </div>

-          {/* 记忆总量 */}
-          <div className="rb:font-regular rb:text-[12px] rb:text-[#5B6167] rb:leading-[16px] rb:mb-[25px]">
-            {t('userMemory.totalNumOfMemories')}
-            <div className="rb:font-extrabold rb:text-[24px] rb:text-[#212332] rb:leading-[30px] rb:mt-[8px]">{memory || 0}</div>
-          </div>
+              <div className="rb:flex rb:gap-[8px] rb:mb-[8px] rb:flex-wrap rb:mt-[25px]">
+                {data?.hot_tags?.map((tag, tagIndex) => (
+                  <span key={tag} className="rb:rounded-[11px] rb:p-[0_8px] rb:leading-[22px] rb:border"
+                    style={{
+                      backgroundColor: `rgba(${tagColors[tagIndex % tagColors.length]}, 0.08)`,
+                      borderColor: `rgba(${tagColors[tagIndex % tagColors.length]}, 0.3)`,
+                      color: `rgba(${tagColors[tagIndex % tagColors.length]}, 1)`,
+                    }}
+                  >
+                    {tag.name}({tag.frequency})
+                  </span>
+                ))}
+              </div>

-          {/* 关于我 */}
-          <>
-            <Title
-              type="aboutUs"
-              title={t('userMemory.aboutMe')}
-              icon={aboutUs}
-              t={t}
-              expanded={expanded.includes('aboutUs')}
-              onClick={handleTitleClick}
-            />
-            {expanded.includes('aboutUs') && (
+              {/* 记忆总量 */}
+              <div className="rb:font-regular rb:text-[12px] rb:text-[#5B6167] rb:leading-[16px] rb:mb-[25px]">
+                {t('userMemory.totalNumOfMemories')}
+                <div className="rb:font-extrabold rb:text-[24px] rb:text-[#212332] rb:leading-[30px] rb:mt-[8px]">{memory || 0}</div>
+              </div>
+
+              {/* 关于我 */}
              <>
-                {loading.summary
-                  ? <Skeleton className="rb:mt-[16px]" />
-                  : summary 
-                  ? <div className="rb:font-regular rb:leading-[22px] rb:pt-[16px]">
-                    {summary || '-'}
-                  </div>
-                  : <Empty size={88} className="rb:mt-[48px] rb:mb-[81px]" />
-                }
+                <Title
+                  type="aboutUs"
+                  title={t('userMemory.aboutMe')}
+                  icon={aboutUs}
+                  t={t}
+                  expanded={expanded.includes('aboutUs')}
+                  onClick={handleTitleClick}
+                />
+                {expanded.includes('aboutUs') && (
+                  <>
+                    {loading.summary
+                      ? <Skeleton className="rb:mt-[16px]" />
+                      : summary 
+                      ? <div className="rb:font-regular rb:leading-[22px] rb:pt-[16px]">
+                        {summary || '-'}
+                      </div>
+                      : <Empty size={88} className="rb:mt-[48px] rb:mb-[81px]" />
+                    }
+                  </>
+                )}
              </>
-            )}
-          </>

-          {/* 兴趣分布 */}
-          <>
-            <Title
-              type="interestDistribution"
-              title={t('userMemory.interestDistribution')}
-              icon={interestDistribution}
-              t={t}
-              expanded={expanded.includes('interestDistribution')}
-              onClick={handleTitleClick}
-            />
+              {/* 兴趣分布 */}
+              <>
+                <Title
+                  type="interestDistribution"
+                  title={t('userMemory.interestDistribution')}
+                  icon={interestDistribution}
+                  t={t}
+                  expanded={expanded.includes('interestDistribution')}
+                  onClick={handleTitleClick}
+                />

-            {expanded.includes('interestDistribution') && (
-              <PieCard />
-            )}
-          </>
-        </RbCard>
+                {expanded.includes('interestDistribution') && (
+                  <PieCard />
+                )}
+              </>
+            </RbCard>
+          </Col>
+          <Col span={24}>
+            <EmotionTags />
+          </Col>
+        </Row>
      </Col>
      <Col span={16}>
        <Row gutter={[16, 16]}>
@@ -182,6 +195,15 @@ const Neo4j: FC = () => {
          </Col>
          {/* 关系网络 + 记忆详情 */}
          <RelationshipNetwork />
+          <Col span={12}>
+            <WordCloud />
+          </Col>
+          <Col span={12}>
+            <Health />
+          </Col>
+          <Col span={24}>
+            <Suggestions />
+          </Col>
        </Row>
      </Col>
    </Row>
--- a/web/src/views/UserMemoryDetail/components/EmotionTags.tsx
+++ b/web/src/views/UserMemoryDetail/components/EmotionTags.tsx
@@ -0,0 +1,111 @@
+import { type FC, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useParams } from 'react-router-dom'
+
+import Empty from '@/components/Empty'
+import RbCard from '@/components/RbCard/Card'
+import { getWordCloud } from '@/api/memory'
+
+interface TagList {
+  keywords: Array<{ keyword: string; frequency: number; emotion_type: string; avg_intensity: number; }>;
+  total_keywords: number;
+}
+const EmotionTags: FC = () => {
+  const { t } = useTranslation()
+  const { id } = useParams()
+  const [tagList, setTagList] = useState<TagList | null>(null)
+
+  useEffect(() => {
+    getEmotionTagData()
+  }, [id])
+
+  const getEmotionTagData = () => {
+    if (!id) {
+      return
+    }
+    getWordCloud(id)
+      .then((res) => {
+        setTagList(res as TagList)
+      })
+  }
+
+  const [visibleCount, setVisibleCount] = useState(0)
+
+  useEffect(() => {
+    if (!tagList || tagList?.keywords.length === 0) return
+    
+    const timer = setInterval(() => {
+      setVisibleCount(prev => {
+        if (prev >= tagList?.keywords.length) {
+          clearInterval(timer)
+          return prev
+        }
+        return prev + 1
+      })
+    }, 200)
+
+    return () => clearInterval(timer)
+  }, [tagList?.keywords.length])
+
+  const getEmotionColor = (emotionType: string) => {
+    const colors: Record<string, string> = {
+      joy: '#52c41a',
+      anger: '#ff4d4f', 
+      sadness: '#1890ff',
+      fear: '#fa8c16',
+      neutral: '#8c8c8c',
+      surprise: '#722ed1'
+    }
+    return colors[emotionType] || '#8c8c8c'
+  }
+
+  const emotionStats = tagList?.keywords.reduce((acc, item) => {
+    acc[item.emotion_type] = (acc[item.emotion_type] || 0) + item.frequency
+    return acc
+  }, {} as Record<string, number>) ?? {}
+
+  return (
+    <RbCard
+      title={t('emotionDetail.emotionTags')}
+      headerType="borderless"
+      headerClassName="rb:text-[18px]! rb:leading-[24px]"
+      bodyClassName='rb:p-0! rb:relative'
+    >
+      {tagList
+        ? <>
+          <div className="rb:flex rb:flex-wrap rb:items-center rb:gap-6 rb:text-sm rb:mt-3 rb:p-3 rb:bg-[#F0F3F8]">
+            {Object.entries(emotionStats).map(([type, count]) => {
+              console.log(type)
+              return (
+                <div key={type} className="rb:flex rb:items-center rb:gap-2">
+                  <div className="rb:w-3 rb:h-3 rb:rounded-full" style={{ backgroundColor: getEmotionColor(type) }}></div>
+                  <span className="rb:text-gray-600">{t(`emotionDetail.${type || 'neutral'}`)} ({count}个)</span>
+                </div>
+              )
+            })}
+          </div>
+          <div className="rb:mt-6 rb:flex rb:items-center rb:flex-wrap rb:gap-3 rb:mb-3 rb:px-6">
+            {tagList.keywords.slice(0, visibleCount).map((item, index) => (
+              <div
+                key={index}
+                className="rb:flex rb:items-center rb:justify-center rb:animate-fadeIn rb:px-4 rb:py-2 rb:rounded-full rb:text-white rb:font-medium"
+                style={{
+                  backgroundColor: getEmotionColor(item.emotion_type),
+                  fontSize: `${12 + item.avg_intensity * 8}px`,
+                  animationDelay: `${index * 200}ms`,
+                  height: `${20 + item.avg_intensity * 20}px`,
+                  transition: 'all 0.3s ease-in-out'
+                }}
+              >
+                {item.keyword}
+              </div>
+            ))}
+          </div>
+        </>
+        : <Empty />
+      }
+    </RbCard>
+  )
+}
+
+export default EmotionTags
--- a/web/src/views/UserMemoryDetail/components/Health.tsx
+++ b/web/src/views/UserMemoryDetail/components/Health.tsx
@@ -0,0 +1,100 @@
+import { type FC, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useParams } from 'react-router-dom'
+import { Progress } from 'antd'
+
+import Empty from '@/components/Empty'
+import RbCard from '@/components/RbCard/Card'
+import { getEmotionHealth } from '@/api/memory'
+interface Health {
+  health_score: number;
+  level: string;
+  dimensions: {
+    positivity_rate: {
+      score: number;
+      positive_count: number;
+      negative_count: number;
+      neutral_count: number;
+    };
+    stability: {
+      score: number;
+      std_deviation: number;
+    };
+    resilience: {
+      score: number;
+      recovery_rate: number;
+    };
+  };
+  emotion_distribution: {
+    joy: number;
+    sadness: number;
+    anger: number;
+    fear: number;
+    surprise: number;
+    neutral: number;
+  };
+  time_range: string;
+}
+const Health: FC = () => {
+  const { t } = useTranslation()
+  const { id } = useParams()
+  const [health, setHealth] = useState<Health | null>(null)
+
+  useEffect(() => {
+    getWordCloudData()
+  }, [id])
+
+  const getWordCloudData = () => {
+    if (!id) {
+      return
+    }
+    getEmotionHealth(id)
+      .then((res) => {
+        setHealth(res as Health)
+      })
+  }
+
+  return (
+    <RbCard
+      title={t('emotionDetail.health')}
+      headerType="borderless"
+      headerClassName="rb:text-[18px]! rb:leading-[24px]"
+      height="100%"
+    >
+      {health
+        ? <>
+          <div className="rb:flex rb:justify-center rb:items-center">
+            <Progress
+              size={250}
+              type="circle"
+              strokeColor={{
+                '0%': '#108ee9',
+                '100%': '#87d068',
+              }}
+              percent={health.health_score}
+              format={(percent) => `${percent}(${health.level})`}
+            />
+          </div>
+
+          {health.dimensions && <>
+            <div className="rb:flex rb:items-center rb:justify-between rb:mt-6">
+              <div className="rb:w-40 rb:mr-3">{t('emotionDetail.positivity_rate')}</div> 
+              <Progress className="rb:w-[calc(100%-180px)]" percent={health.dimensions.positivity_rate.score} />
+            </div>
+            <div className="rb:flex rb:items-center rb:gap-3 rb:mt-3">
+              <div className="rb:w-40 rb:mr-3">{t('emotionDetail.stability')}</div>
+              <Progress className="rb:w-[calc(100%-180px)]" percent={health.dimensions.stability.score} />
+            </div>
+            <div className="rb:flex rb:items-center rb:gap-3 rb:mt-3">
+              <div className="rb:w-40 rb:mr-3">{t('emotionDetail.resilience')}</div> 
+              <Progress className="rb:w-[calc(100%-180px)]" percent={health.dimensions.resilience.score} />
+            </div>
+          </>}
+        </>
+        : <Empty />
+      }
+    </RbCard>
+  )
+}
+
+export default Health
--- a/web/src/views/UserMemoryDetail/components/Suggestions.tsx
+++ b/web/src/views/UserMemoryDetail/components/Suggestions.tsx
@@ -0,0 +1,63 @@
+import { type FC, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useParams } from 'react-router-dom'
+
+import Empty from '@/components/Empty'
+import RbCard from '@/components/RbCard/Card'
+import { getEmotionSuggestions } from '@/api/memory'
+import RbAlert from '@/components/RbAlert'
+
+
+interface Suggestions {
+  health_summary: string;
+  suggestions: Array<{
+    type: string;
+    title: string;
+    content: string;
+    priority: string;
+    actionable_steps: string[];
+  }>;
+}
+const Suggestions: FC = () => {
+  const { t } = useTranslation()
+  const { id } = useParams()
+  const [suggestions, setSuggestions] = useState<Suggestions | null>(null)
+
+  useEffect(() => {
+    getSuggestionData()
+  }, [id])
+
+  const getSuggestionData = () => {
+    if (!id) {
+      return
+    }
+    getEmotionSuggestions(id)
+      .then((res) => {
+        setSuggestions(res as Suggestions)
+      })
+  }
+
+  return (
+    <RbCard
+      title={t('emotionDetail.suggestions')}
+      headerType="borderless"
+      headerClassName="rb:text-[18px]! rb:leading-[24px]"
+    >
+      {suggestions
+        ? <>
+          <RbAlert className="rb:mb-3">{suggestions.health_summary}</RbAlert>
+          {suggestions.suggestions.map((item, index) => (
+            <div key={index} className="rb:mb-3">
+              <div className="rb:font-medium">{index + 1}. {item.title}</div>
+              <div className="rb:text-[12px] rb:text-[#5B6167] rb:mt-1 rb:mb-2">{item.content}</div>
+              {item.actionable_steps.map((vo, idx) => <div key={idx} className="rb:ml-6 rb:text-[12px] rb:text-[#5B6167] rb:mt-1">- {vo}</div>)}
+            </div>
+          ))}
+        </>
+        : <Empty />
+      }
+    </RbCard>
+  )
+}
+
+export default Suggestions
--- a/web/src/views/UserMemoryDetail/components/WordCloud.tsx
+++ b/web/src/views/UserMemoryDetail/components/WordCloud.tsx
@@ -0,0 +1,131 @@
+import { type FC, useEffect, useState, useMemo, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useParams } from 'react-router-dom'
+import ReactEcharts from 'echarts-for-react'
+import { Progress } from 'antd'
+
+import Empty from '@/components/Empty'
+import RbCard from '@/components/RbCard/Card'
+import { getEmotionTags } from '@/api/memory'
+
+interface WordCloud {
+  tags: Array<{
+    emotion_type: string;
+    count: number;
+    percentage: number;
+    avg_intensity: number;
+  }>;
+  total_count: number;
+}
+const WordCloud: FC = () => {
+  const { t } = useTranslation()
+  const { id } = useParams()
+  const chartRef = useRef<ReactEcharts>(null);
+  const resizeScheduledRef = useRef(false)
+  const [wordCloud, setWordCloud] = useState<WordCloud | null>(null)
+
+  useEffect(() => {
+    getWordCloudData()
+  }, [id])
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (chartRef.current && !resizeScheduledRef.current) {
+        resizeScheduledRef.current = true
+        requestAnimationFrame(() => {
+          chartRef.current?.getEchartsInstance().resize();
+          resizeScheduledRef.current = false
+        });
+      }
+    }
+
+    const resizeObserver = new ResizeObserver(handleResize)
+    const chartElement = chartRef.current?.getEchartsInstance().getDom().parentElement
+    if (chartElement) {
+      resizeObserver.observe(chartElement)
+    }
+
+    return () => {
+      resizeObserver.disconnect()
+    }
+  }, [wordCloud])
+
+  const getWordCloudData = () => {
+    if (!id) {
+      return
+    }
+    getEmotionTags(id)
+      .then((res) => {
+        setWordCloud(res as WordCloud)
+      })
+  }
+  const radarOption = useMemo(() => {
+    if (!wordCloud?.tags.length) return {}
+    
+    // 将avg_intensity转换为1-100范围
+    const radarData = wordCloud.tags.map(item => ({
+      name: item.emotion_type,
+      value: Math.round(item.avg_intensity * 100),
+      count: item.count,
+      percentage: item.percentage
+    }))
+    
+    return {
+      tooltip: {
+        trigger: 'item',
+        formatter: (params: any) => {
+          const dataIndex = params.dataIndex
+          const item = radarData[dataIndex]
+          return `${item.name}<br/>${item.percentage.toFixed(1)}%`
+        }
+      },
+      radar: {
+        indicator: radarData.map(item => ({
+          name: t(`emotionDetail.${item.name}`),
+          max: 100,
+          min: 1
+        }))
+      },
+      series: [{
+        type: 'radar',
+        name: 'Emotion Intensity',
+        data: [{
+          value: radarData.map(item => item.value),
+          name: 'Emotion Intensity'
+        }]
+      }]
+    }
+  }, [wordCloud])
+
+  return (
+    <RbCard
+      title={t('emotionDetail.wordCloud')}
+      headerType="borderless"
+      headerClassName="rb:text-[18px]! rb:leading-[24px]"
+      height="100%"
+    >
+      {wordCloud
+        ? <div className="rb:flex rb:h-100">
+          <ReactEcharts ref={chartRef} option={radarOption} style={{ width: '50%', height: '100%' }} />
+          <div className="rb:w-[50%] rb:pl-4 rb:flex rb:flex-col rb:justify-center">
+            <div className="rb:text-[18px] rb:font-medium rb:mb-4">样本数：{wordCloud.total_count}</div>
+            <div className="rb:space-y-3">
+              {wordCloud.tags.map(item => (
+                <div key={item.emotion_type}>
+                  <div className="rb:flex rb:items-center rb:justify-between rb:font-medium">
+                    {t(`emotionDetail.${item.emotion_type}`)}
+                    <div className="rb:text-[12px] rb:text-[#5B6167] rb:font-regular">{item.count}{t('emotionDetail.pieces')}</div>
+                  </div>
+                  <Progress size="small" percent={item.percentage} />
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+        : <Empty />
+      }
+    </RbCard>
+  )
+}
+
+export default WordCloud
--- a/web/src/views/UserMemoryDetail/pages/EmotionDetail.tsx
+++ b/web/src/views/UserMemoryDetail/pages/EmotionDetail.tsx
@@ -0,0 +1,29 @@
+import { type FC } from 'react'
+import { Row, Col } from 'antd';
+
+import WordCloud from '../components/WordCloud'
+import EmotionTags from '../components/EmotionTags'
+import Health from '../components/Health'
+import Suggestions from '../components/Suggestions'
+
+
+const EmotionDetail: FC = () => {
+  return (
+    <Row gutter={[16, 16]}>
+      <Col span={12}>
+        <WordCloud />
+      </Col>
+      <Col span={12}>
+        <EmotionTags />
+      </Col>
+      <Col span={12}>
+        <Health />
+      </Col>
+      <Col span={12}>
+        <Suggestions />
+      </Col>
+    </Row>
+  )
+}
+
+export default EmotionDetail