classDiagram
    direction TB

    %% ===================== 后端 =====================

    class SessionQueryService {
        +AsyncSession db
        +__init__(db: AsyncSession)
        +get_conversations(status, agent_id, page, page_size) Tuple~List~Conversation~, int~
        +get_agent_conversations(agent_id, page, page_size) Tuple~List~Conversation~, int~
        +get_conversation(conversation_id, include_messages) Conversation
        +get_employee_history_messages(employee_id, limit, before, current_conversation_id) Tuple~List~Message~, bool, Dict~str,str~~
    }

    class Message {
        +str id
        +str conversation_id
        +str sender_type
        +str sender_id
        +str sender_name
        +str content
        +str msg_type
        +Optional~str~ reply_to_id
        +Optional~str~ media_url
        +Optional~str~ file_name
        +Optional~int~ file_size
        +Optional~Dict~ extra_data
        +bool ai_suggestion
        +str status
        +bool is_read
        +datetime created_at
    }

    class Conversation {
        +str id
        +str employee_id
        +str employee_name
        +str status
        +str assigned_agent_id
        +datetime last_message_at
        +str last_message_summary
        +datetime created_at
    }

    class HistoryMessageListResponse {
        +List~MessageResponse~ items
        +bool has_more
        +Dict~str,str~ conversation_summaries
    }

    class MessageResponse {
        +str id
        +str conversation_id
        +str sender_type
        +str sender_id
        +str sender_name
        +str content
        +str msg_type
        +bool ai_suggestion
        +bool is_read
        +datetime created_at
        +Optional~str~ sender_avatar
    }

    %% 后端关系
    SessionQueryService ..> Message : 查询
    SessionQueryService ..> Conversation : 查询
    HistoryMessageListResponse *-- MessageResponse : contains
    Message }--|| Conversation : belongs to

    %% ===================== 前端 API 层 =====================

    class MessageAPI {
        <<module: frontend-agent/src/api/message.ts>>
        +getMessages(conversationId, params) Promise~MessageListData~
        +sendMessage(conversationId, content, msgType, options) Promise~Message~
        +pollMessages(conversationId, afterMessageId) Promise~MessageListData~
        +getHistoryMessages(employeeId, params) Promise~HistoryMessageListData~
    }

    class HistoryMessageListData {
        <<TypeScript interface>>
        +Message[] items
        +bool has_more
        +Record~str,str~ conversation_summaries
    }

    MessageAPI ..> HistoryMessageListData : returns
    MessageAPI ..> BackendAPI : HTTP GET

    %% ===================== 前端 Store 层 =====================

    class ConversationStore {
        <<Pinia Store>>
        %% 现有状态
        +Ref~Conversation[]~ conversations
        +Ref~str~ currentConversationId
        +Ref~Message[]~ messages
        +Ref~bool~ loadingMessages

        %% 新增：历史模式状态
        +Ref~bool~ historyMode
        +Ref~Message[]~ historyMessages
        +Ref~bool~ historyLoading
        +Ref~bool~ historyHasMore
        +Ref~Record~str,str~~ historyConversationSummaries
        +Ref~str~ historyCursor

        %% 新增：计算属性
        +Computed~Message[]~ displayMessages
        +Computed~bool~ isHistoryReadonly

        %% 现有方法
        +fetchConversations() void
        +selectConversation(conversationId) void
        +fetchMessages(conversationId) void
        +sendReply(content, replyToId) void

        %% 新增：历史模式方法
        +enableHistoryMode() Promise~void~
        +disableHistoryMode() void
        +loadMoreHistory() Promise~void~
        +resetHistoryState() void
    }

    ConversationStore ..> MessageAPI : calls
    ConversationStore ..> Message : manages

    %% ===================== 前端组件层 =====================

    class UserInfoBar {
        <<Vue Component>>
        +Props: conversation, availableAgents, canInviteCollaborator
        +Emits: assign, resolve, toggle-pin, toggle-todo, transfer, invite
        +Emits: toggle-history  %% 新增
        +resetForNewConversation() void
        %% 新增：历史开关三态
        +historyToggleClass: Computed~string~
    }

    class ChatArea {
        <<Vue Component>>
        +conversationStore: ConversationStore
        +messageListRef: Ref~HTMLElement~
        %% 新增：渲染逻辑
        +renderedItems: Computed~Array~
        +handleToggleHistory() void
        +handleScrollUp() void
        %% 修改：displayMessages 替代 messages
    }

    class ConversationSeparator {
        <<Vue Component — 新增>>
        +Props: summary: string
        +Props: isCurrent: boolean
        %% 纯展示组件，无 emit
    }

    class MessageBubble {
        <<Vue Component — 已存在>>
        +Props: message: Message
        +Emits: reply, scroll-to-message
    }

    %% 组件关系
    ChatArea ..> ConversationStore : uses
    ChatArea ..> UserInfoBar : contains
    ChatArea ..> ConversationSeparator : renders
    ChatArea ..> MessageBubble : renders
    UserInfoBar --|> ChatArea : child component
    ConversationSeparator --|> ChatArea : child component