修复会话安全与实时消息

web/src/pages/agent/ChatHistory.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
 import { Input, Select, Tag, Empty, Spin } from 'antd'
 import { SearchOutlined, UserOutlined } from '@ant-design/icons'
-import { getSessions, type Session as SessionType } from '@/services/api'
+import { getSession, getSessions, type Session as SessionType } from '@/services/api'
 
 const statusColors: Record<string, string> = { active: 'blue', ended: 'green', archived: 'default' }
 const statusLabels: Record<string, string> = { active: '进行中', ended: '已结束', waiting: '等待中' }
@@ -12,6 +12,8 @@ const ChatHistory = () => {
   const [search, setSearch] = useState('')
   const [statusFilter, setStatusFilter] = useState<string>()
   const [selectedId, setSelectedId] = useState<number | null>(null)
+  const [messages, setMessages] = useState<{ id: number; sender_type: string; content: string; sent_at: string }[]>([])
+  const [detailLoading, setDetailLoading] = useState(false)
 
   useEffect(() => { loadSessions() }, [statusFilter])
 
@@ -26,6 +28,18 @@ const ChatHistory = () => {
 
   const selected = sessions.find(s => s.id === selectedId)
 
+  useEffect(() => {
+    if (!selectedId) {
+      setMessages([])
+      return
+    }
+    setDetailLoading(true)
+    getSession(selectedId).then(res => {
+      const detail = res.data as { messages?: { id: number; sender_type: string; content: string; sent_at: string }[] }
+      setMessages(detail.messages || [])
+    }).catch(() => setMessages([])).finally(() => setDetailLoading(false))
+  }, [selectedId])
+
   return (
     <div className="h-full flex">
       <div className="w-[360px] flex-shrink-0 bg-white border-r border-neutral-200 flex flex-col">
@@ -74,7 +88,15 @@ const ChatHistory = () => {
               )}
             </div>
             <div className="space-y-4">
-              <div className="text-sm text-neutral-400 text-center">消息内容通过 WebSocket 实时传输</div>
+              {detailLoading ? <div className="flex justify-center py-10"><Spin /></div> : messages.length === 0 ? <Empty description="暂无消息记录" /> : messages.map(message => (
+                <div key={message.id} className={`flex ${message.sender_type === 'agent' ? 'justify-start' : 'justify-end'}`}>
+                  <div className={`max-w-[70%] rounded-lg px-3 py-2 text-sm ${message.sender_type === 'agent' ? 'bg-neutral-100 text-neutral-700' : 'bg-blue-500 text-white'}`}>
+                    <div className="text-xs mb-1 opacity-70">{message.sender_type === 'agent' ? '客服' : '访客'}</div>
+                    <div>{message.content}</div>
+                    <div className="text-xs mt-1 opacity-60">{new Date(message.sent_at).toLocaleString('zh-CN')}</div>
+                  </div>
+                </div>
+              ))}
             </div>
           </div>
         ) : <div className="h-full flex items-center justify-center text-neutral-400">选择一个对话查看详情</div>}