feat: user memory

2026-01-10 17:35:17 +08:00
parent 81508a25a8
commit 177d514d13
19 changed files with 615 additions and 31 deletions
--- a/web/src/views/UserMemoryDetail/components/AboutMe.tsx
+++ b/web/src/views/UserMemoryDetail/components/AboutMe.tsx
@@ -30,7 +30,6 @@ const AboutMe = forwardRef<AboutMeRef>((_props, ref) => {
    getData()
  }, [id])
  
-  // 记忆洞察
  const getData = () => {
    if (!id) return
    setLoading(true)
--- a/web/src/views/UserMemoryDetail/components/EmotionLine.tsx
+++ b/web/src/views/UserMemoryDetail/components/EmotionLine.tsx
@@ -0,0 +1,173 @@
+import { type FC, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import ReactEcharts from 'echarts-for-react';
+import * as echarts from 'echarts';
+import Empty from '@/components/Empty'
+import Loading from '@/components/Empty/Loading'
+import type { Emotion } from './GraphDetail'
+
+interface EmotionLineProps {
+  chartData: Emotion[];
+  loading?: boolean;
+}
+
+const Colors = ['#369F21', '#155EEF', '#FF5D34']
+
+const EmotionLine: FC<EmotionLineProps> = ({ chartData, loading }) => {
+  const { t } = useTranslation()
+  const chartRef = useRef<ReactEcharts>(null);
+
+  const getSeries = () => {
+    const emotionTypes = [...new Set(chartData.map(item => item.emotion_type))]
+    const timePoints = [...new Set(chartData.map(item => item.created_at))].sort()
+    
+    return emotionTypes.map((emotionType, index) => {
+      const emotionData = chartData.filter(item => item.emotion_type === emotionType)
+      const dataMap = new Map(emotionData.map(item => [item.created_at, item.emotion_intensity]))
+      const seriesData = timePoints.map(time => dataMap.get(time) || 0)
+      
+      return {
+        name: emotionType,
+        type: 'line',
+        smooth: true,
+        lineStyle: {
+          width: 3,
+          color: Colors[index % Colors.length]
+        },
+        itemStyle: {
+          color: Colors[index % Colors.length]
+        },
+        areaStyle: {
+          color: Colors[index % Colors.length],
+          opacity: 0.08
+        },
+        data: seriesData
+      }
+    })
+  }
+
+  return (
+    <>
+      <div>{t('userMemory.emotionLine')}</div>
+      {loading
+        ? <Loading size={249} />
+        : !chartData || chartData.length === 0
+        ? <Empty size={120} className="rb:mt-12 rb:mb-20.25" />
+        : <ReactEcharts
+            ref={chartRef}
+            option={{
+              color: Colors,
+              tooltip: {
+                trigger: 'axis',
+                extraCssText: 'box-shadow: 0px 2px 6px 0px rgba(33,35,50,0.16); border-radius: 8px;',
+                axisPointer: {
+                  type: 'line',
+                  crossStyle: {
+                    color: '#5F6266',
+                  },
+                  lineStyle: {
+                    color: '#5F6266',
+                  }
+                },
+                formatter: function(params: any) {
+                  let result = `${params[0].axisValue}<br/>`
+                  params.forEach((param: any) => {
+                    result += `${param.marker}${param.seriesName}: ${param.value}<br/>`
+                  })
+                  return result
+                }
+              },
+              legend: {
+                bottom: 2,
+                padding: 0,
+                itemGap: 24,
+                itemWidth: 40,
+                itemHeight: 12,
+                borderRadius: 2,
+                orient: 'horizontal',
+                textStyle: {
+                  color: '#5B6167',
+                  fontFamily: 'PingFangSC, PingFang SC',
+                  lineHeight: 16,
+                }
+              },
+              grid: {
+                top: 16,
+                left: 30,
+                right: 36,
+                bottom: 48,
+                // containLabel: false
+              },
+              xAxis: {
+                type: 'category',
+                data: [...new Set(chartData.map(item => item.created_at))].sort().map(time => {
+                  const date = new Date(time)
+                  return `${date.getFullYear()}.${String(date.getMonth() + 1).padStart(2, '0')}`
+                }),
+                boundaryGap: false,
+                axisLabel: {
+                  color: '#A8A9AA',
+                  fontFamily: 'PingFangSC, PingFang SC'
+                },
+                axisLine: {
+                  show: true,
+                  lineStyle: {
+                    color: '#EBEBEB'
+                  }
+                },
+                splitLine: {
+                  show: true,
+                  lineStyle: {
+                    color: '#EBEBEB',
+                    type: 'solid'
+                  }
+                },
+                axisTick: {
+                  show: true,
+                  lineStyle: {
+                    color: '#EBEBEB',
+                    type: 'solid'
+                  }
+                }
+              },
+              yAxis: {
+                type: 'value',
+                axisLabel: {
+                  color: '#A8A9AA',
+                  fontFamily: 'PingFangSC, PingFang SC'
+                },
+                axisLine: {
+                  show: true,
+                  lineStyle: {
+                    color: '#EBEBEB'
+                  }
+                },
+                splitLine: {
+                  show: true,
+                  lineStyle: {
+                    color: '#EBEBEB',
+                    type: 'solid'
+                  }
+                },
+                axisTick: {
+                  show: true,
+                  lineStyle: {
+                    color: '#EBEBEB',
+                    type: 'solid'
+                  }
+                },
+                max: 1,
+                min: 0
+              },
+              series: getSeries()
+            }}
+            style={{ height: '265px', width: '100%', minWidth: '100%' }}
+            notMerge={true}
+            lazyUpdate={true}
+          />
+      }
+    </>
+  )
+}
+
+export default EmotionLine
--- a/web/src/views/UserMemoryDetail/components/ExplicitDetailModal.tsx
+++ b/web/src/views/UserMemoryDetail/components/ExplicitDetailModal.tsx
@@ -0,0 +1,100 @@
+import { forwardRef, useImperativeHandle, useState, useCallback } from 'react';
+import { useParams } from 'react-router-dom'
+import { Descriptions, Skeleton } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+import RbModal from '@/components/RbModal'
+import { getExplicitMemoryDetails } from '@/api/memory'
+import { formatDateTime } from '@/utils/format'
+import type { ExplicitDetailModalRef, EpisodicMemory, SemanticMemory } from '../pages/ExplicitDetail'
+
+
+interface Data {
+  memory_type: 'episodic' | 'semantic';
+  title: string;
+  content: string;
+  emotion: string;
+  created_at: number;
+  
+  name: string;
+  core_definition: string;
+  detailed_notes: string;
+}
+const ExplicitDetailModal = forwardRef<ExplicitDetailModalRef>((_props, ref) => {
+  const { t } = useTranslation();
+  const { id } = useParams()
+  const [visible, setVisible] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [data, setData] = useState<Data>({} as Data)
+
+  // 封装取消方法，添加关闭弹窗逻辑
+  const handleClose = () => {
+    setVisible(false);
+    setData({} as Data)
+  };
+
+  const handleOpen = (vo: EpisodicMemory | SemanticMemory) => {
+    setLoading(true)
+    getExplicitMemoryDetails({
+      end_user_id: id as string,
+      memory_id: vo.id
+    })
+      .then(res => {
+        setVisible(true);
+        setData(res as Data)
+      })
+      .finally(() => {
+        setLoading(false)
+      })
+  };
+
+  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'
+  }
+
+  // 暴露给父组件的方法
+  useImperativeHandle(ref, () => ({
+    handleOpen,
+  }));
+  return (
+    <RbModal
+      title={data.name || data.title}
+      open={visible}
+      footer={null}
+      onCancel={handleClose}
+    >
+      {loading ? <Skeleton active />
+        : <Descriptions column={data.memory_type === 'semantic' ? 1 : 2} classNames={{ label: 'rb:w-20' }}>
+          {data.emotion && <Descriptions.Item label={t('explicitDetail.emotion')}>
+            <div className="rb:flex rb:items-center rb:gap-2">
+              <div className="rb:w-3 rb:h-3 rb:rounded-full" style={{ backgroundColor: getEmotionColor(data.emotion) }}></div>
+              <span className="rb:text-gray-600">{t(`statementDetail.${data.emotion || 'neutral'}`)}</span>
+            </div>
+          </Descriptions.Item>}
+          {data.core_definition && <Descriptions.Item label={t('explicitDetail.core_definition')}>
+            {data.core_definition}
+          </Descriptions.Item>}
+          {data.detailed_notes && <Descriptions.Item label={t('explicitDetail.detailed_notes')}>
+            {data.detailed_notes}
+          </Descriptions.Item>}
+          {data.created_at && <Descriptions.Item label={t('explicitDetail.created_at')}>
+            {formatDateTime(data.created_at)}
+          </Descriptions.Item>}
+          {data.content && <Descriptions.Item span="filled" label={t('explicitDetail.content')}>
+            {data.content}
+          </Descriptions.Item>}
+        </Descriptions>
+      }
+    </RbModal>
+  );
+});
+
+export default ExplicitDetailModal;
--- a/web/src/views/UserMemoryDetail/components/GraphDetail.tsx
+++ b/web/src/views/UserMemoryDetail/components/GraphDetail.tsx
@@ -0,0 +1,174 @@
+import { type FC, useState, forwardRef, useImperativeHandle } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useParams } from 'react-router-dom'
+import { Row, Col, Tabs } from 'antd'
+
+import { getRelationshipEvolution, getTimelineMemories } from '@/api/memory'
+import type { Node, GraphDetailRef } from '../types'
+import RbDrawer from '@/components/RbDrawer'
+import RbCard from '@/components/RbCard/Card'
+import EmotionLine from './EmotionLine'
+
+export interface Emotion {
+  emotion_intensity: number;
+  emotion_type: string;
+  created_at: string | number;
+}
+export interface Interaction {
+  name: string;
+  importance_score: number;
+  interaction_count: number;
+}
+
+const GraphDetail = forwardRef<GraphDetailRef>((_props, ref) => {
+  const { t } = useTranslation()
+  const { id } = useParams()
+  const [open, setOpen] = useState(false);
+  const [vo, setVo] = useState<Node | null>(null)
+  const [emotionData, setEmotionData] = useState<Emotion[]>([
+    {
+      "emotion_intensity": 0.1,
+      "emotion_type": "neutral",
+      "created_at": "2026-01-07 19:14:34"
+    },
+    {
+      "emotion_intensity": 0.2,
+      "emotion_type": "neutral",
+      "created_at": "2026-02-08 19:14:34"
+    },
+    {
+      "emotion_intensity": 0.1,
+      "emotion_type": "neutral",
+      "created_at": "2026-03-09 19:14:34"
+    },
+    {
+      "emotion_intensity": 0.1,
+      "emotion_type": "neutral",
+      "created_at": "2026-04-10 19:14:34"
+    },
+    {
+      "emotion_intensity": 0.1,
+      "emotion_type": "sadness",
+      "created_at": "2026-01-07 19:14:34"
+    },
+    {
+      "emotion_intensity": 0.2,
+      "emotion_type": "sadness",
+      "created_at": "2026-02-08 19:14:34"
+    },
+    {
+      "emotion_intensity": 0.1,
+      "emotion_type": "sadness",
+      "created_at": "2026-03-09 19:14:34"
+    },
+    {
+      "emotion_intensity": 0.1,
+      "emotion_type": "sadness",
+      "created_at": "2026-04-10 19:14:34"
+    },
+  ])
+  const [interactionData, setInteractionData] = useState<Interaction[]>([
+    {
+      "name": "小蓝",
+      "importance_score": 0.5,
+      "interaction_count": 1
+    }
+  ])
+  const [timelineMemories, setTimelineMemories] = useState({
+    "code": 0,
+    "msg": "共同记忆时间线",
+    "data": {
+      "success": true,
+      "data": {
+        "MemorySummary": [
+          "小蓝今天原计划与小明野餐、与小绿看电影，但最终选择与姐姐小红一起看戏。",
+          "用户小明喜欢喝咖啡，每天都要喝拿铁。"
+        ],
+        "Statement": [
+          "小蓝对是否去野餐或看电影感到犹豫。",
+          "小蓝和她姐姐小红出去看戏。",
+          "小明喜欢喝咖啡。",
+          "小明每天都要喝拿铁。",
+          "小明今天约小蓝出去野餐。"
+        ],
+        "ExtractedEntity": [
+          "小明",
+          "咖啡",
+          "拿铁",
+          "小蓝",
+          "野餐"
+        ],
+        "timelines_memory": [
+          "小蓝今天原计划与小明野餐、与小绿看电影，但最终选择与姐姐小红一起看戏。",
+          "用户小明喜欢喝咖啡，每天都要喝拿铁。",
+          "小蓝对是否去野餐或看电影感到犹豫。",
+          "小蓝和她姐姐小红出去看戏。",
+          "小明喜欢喝咖啡。",
+          "小明每天都要喝拿铁。",
+          "小明今天约小蓝出去野餐。",
+          "小明",
+          "咖啡",
+          "拿铁",
+          "小蓝",
+          "野餐"
+        ]
+      }
+    },
+    "error": "",
+    "time": 1767852781464
+  })
+
+  const handleCancel = () => {
+    setVo(null)
+    setOpen(false)
+  }
+  const handleOpen = (vo: Node) => {
+    setOpen(true)
+    setVo(vo)
+    getTimelineMemoriesData(vo)
+  }
+  const getRelationshipEvolutionData = (vo: Node) => {
+    if (!id || !vo.label) return
+
+    getRelationshipEvolution({ id: id as string, label: vo.label })
+      .then(res => {
+        const { emotion, interaction } = res as { emotion: { data: Emotion[]}; interaction: {data: Interaction[]} } || {}
+        setEmotionData(emotion?.data)
+        setInteractionData(interaction?.data)
+      })
+  }
+  const getTimelineMemoriesData = (vo: Node) => {
+    if (!id || !vo.label) return
+
+    getTimelineMemories({ id: id as string, label: vo.label })
+      .then(res => {
+
+      })
+  }
+
+  useImperativeHandle(ref, () => ({
+    handleOpen,
+  }));
+
+  return (
+    <RbDrawer
+      title={vo?.name}
+      open={open}
+      onClose={handleCancel}
+      width={1000}
+    >
+      <div className="rb:text-[16px] rb:font-medium rb:leading-5.5 rb:mb-3">{t('useMemory.relationshipEvolution')}</div>
+      <RbCard>
+        <Row gutter={16}>
+          <Col span={12}>
+            <EmotionLine chartData={emotionData} />
+          </Col>
+          <Col span={12}>
+            <div>{t('userMemory.interaction')}</div>
+          </Col>
+        </Row>
+      </RbCard>
+    </RbDrawer>
+  )
+})
+export default GraphDetail
--- a/web/src/views/UserMemoryDetail/components/Habits.tsx
+++ b/web/src/views/UserMemoryDetail/components/Habits.tsx
@@ -12,7 +12,7 @@ interface HabitsItem {
  habit_description: string;
  frequency_pattern: string;
  time_context: string;
-  confidence_level: string;
+  confidence_level: number;
  supporting_summaries: string[];
  first_observed: string;
  last_observed: string;
@@ -31,7 +31,6 @@ const Habits: FC = () => {
    getData()
  }, [id])
  
-  // 记忆洞察
  const getData = () => {
    if (!id) return
    setLoading(true)
--- a/web/src/views/UserMemoryDetail/components/InterestAreas.tsx
+++ b/web/src/views/UserMemoryDetail/components/InterestAreas.tsx
@@ -33,8 +33,7 @@ const InterestAreas: FC = () => {
    if (!id) return
    getData()
  }, [id])
-  
-  // 记忆洞察
+
  const getData = () => {
    if (!id) return
    setLoading(true)
--- a/web/src/views/UserMemoryDetail/components/NodeStatistics.tsx
+++ b/web/src/views/UserMemoryDetail/components/NodeStatistics.tsx
@@ -47,8 +47,7 @@ const NodeStatistics: FC = () => {
    if (!id) return
    getData()
  }, [id])
-  
-  // 记忆洞察
+
  const getData = () => {
    if (!id) return
    setLoading(true)
--- a/web/src/views/UserMemoryDetail/components/RelationshipNetwork.tsx
+++ b/web/src/views/UserMemoryDetail/components/RelationshipNetwork.tsx
@@ -7,12 +7,13 @@ import dayjs from 'dayjs'
 import RbCard from '@/components/RbCard/Card'
 import ReactEcharts from 'echarts-for-react'
 import detailEmpty from '@/assets/images/userMemory/detail_empty.png'
-import type { Node, Edge, GraphData, StatementNodeProperties, ExtractedEntityNodeProperties } from '../types'
+import type { Node, Edge, GraphData, StatementNodeProperties, ExtractedEntityNodeProperties, GraphDetailRef } from '../types'
 import {
  getMemorySearchEdges,
 } from '@/api/memory'
 import Empty from '@/components/Empty'
 import Tag from '@/components/Tag'
+import GraphDetail from '../components/GraphDetail'

 const colors = ['#155EEF', '#369F21', '#4DA8FF', '#FF5D34', '#9C6FFF', '#FF8A4C', '#8BAEF7', '#FFB048']
 const RelationshipNetwork:FC = () => {
@@ -25,6 +26,7 @@ const RelationshipNetwork:FC = () => {
  const [categories, setCategories] = useState<{ name: string }[]>([])
  const [selectedNode, setSelectedNode] = useState<Node | null>(null)
  // const [fullScreen, setFullScreen] = useState<boolean>(false)
+  const graphDetailRef = useRef<GraphDetailRef>(null)

  console.log('categories', categories)
  // 关系网络
@@ -139,7 +141,7 @@ const RelationshipNetwork:FC = () => {

  const handleViewAll = () => {
    if (!selectedNode) return
-    window.open(`/#/graph/${selectedNode.id}`);
+    graphDetailRef.current?.handleOpen(selectedNode)
  }

  return (
@@ -332,6 +334,8 @@ const RelationshipNetwork:FC = () => {
          </div>
        </RbCard>
      </Col>
+
+      <GraphDetail ref={graphDetailRef} />
    </Row>
  )
 }