sequenceDiagram
    participant U as 坐席用户
    participant UI as UserInfoBar.vue
    participant CA as ChatArea.vue
    participant Store as ConversationStore
    participant API as message.ts API
    participant BE as Backend API
    participant DB as Database

    Note over U,DB: ========== 阶段1：打开历史模式 ==========

    U->>UI: 点击"历史会话"开关按钮
    UI->>CA: $emit('toggle-history')
    CA->>Store: enableHistoryMode()
    Store->>Store: historyMode = true, historyLoading = true
    Store->>API: getHistoryMessages(employeeId, {limit:50, current_conversation_id})
    API->>BE: GET /api/employees/{employee_id}/history-messages?limit=50
    BE->>DB: SELECT conversations WHERE employee_id=?
    DB-->>BE: 会话ID列表 [conv1, conv2, conv3...]
    BE->>DB: SELECT messages WHERE conversation_id IN (...) ORDER BY created_at DESC LIMIT 51
    DB-->>BE: 消息列表 (50条 + 1条判断has_more)
    BE->>DB: 对每个会话查首条employee消息, 取前20字
    DB-->>BE: conversation_summaries {conv1:"摘要1", conv2:"摘要2"...}
    BE-->>API: {items:[...], has_more:true, conversation_summaries:{...}}
    API-->>Store: HistoryMessageListData
    Store->>Store: historyMessages = items.reverse() (ASC排序)
    Store->>Store: historyHasMore = has_more
    Store->>Store: historyCursor = historyMessages[0].id
    Store->>Store: historyConversationSummaries = conversation_summaries
    Store->>Store: historyLoading = false
    Store-->>CA: displayMessages 响应更新 (返回historyMessages)
    CA->>CA: 渲染消息列表 + 插入ConversationSeparator
    CA->>CA: 隐藏 ReplyBox + ReplySuggestArea (只读模式)
    CA-->>U: 显示合并历史时间线

    Note over U,DB: ========== 阶段2：向上滚动加载更多 ==========

    U->>CA: 向上滚动到顶部
    CA->>Store: loadMoreHistory()
    Store->>Store: historyLoading = true
    Store->>API: getHistoryMessages(employeeId, {limit:50, before:historyCursor})
    API->>BE: GET /api/employees/{employee_id}/history-messages?limit=50&before={msgId}
    BE->>DB: 获取before消息的created_at
    BE->>DB: SELECT messages WHERE conv IN (...) AND created_at < before_time ORDER BY DESC LIMIT 51
    DB-->>BE: 更旧的消息列表
    BE->>DB: 对新涉及的会话查首条employee消息摘要
    DB-->>BE: 补充 conversation_summaries
    BE-->>API: {items:[...], has_more:false, conversation_summaries:{...}}
    API-->>Store: HistoryMessageListData
    Store->>Store: historyMessages = newItems.reverse() + historyMessages (前插)
    Store->>Store: historyCursor = historyMessages[0].id (更新游标)
    Store->>Store: historyHasMore = has_more
    Store->>Store: merge conversation_summaries
    Store->>Store: historyLoading = false
    Store-->>CA: displayMessages 更新
    CA-->>U: 显示更多历史消息 + 新分隔条

    Note over U,DB: ========== 阶段3：关闭历史模式 ==========

    U->>UI: 再次点击"历史会话"开关
    UI->>CA: $emit('toggle-history')
    CA->>Store: disableHistoryMode()
    Store->>Store: historyMode = false
    Store->>Store: 清空 historyMessages, historyCursor, historyConversationSummaries
    Store-->>CA: displayMessages 返回 messages (正常数据源)
    CA->>CA: 恢复 ReplyBox + ReplySuggestArea
    CA-->>U: 显示当前会话正常消息

    Note over U,DB: ========== 阶段4：切换会话自动重置 ==========

    U->>CA: 点击左栏其他会话
    CA->>Store: selectConversation(newConvId)
    Store->>Store: resetHistoryState() — historyMode=false, 清空历史状态
    Store->>Store: currentConversationId = newConvId
    Store->>API: getMessages(newConvId, {limit:50})
    API->>BE: GET /api/conversations/{newConvId}/messages?limit=50
    BE-->>API: 正常消息列表
    API-->>Store: MessageListData
    Store->>Store: messages = data.items
    Store-->>CA: displayMessages 返回 messages
    CA-->>U: 显示新会话消息 (历史模式已关闭)