# -*- coding: utf-8 -*-
"""
根页面
"""

import reflex as rx

from application.components.frame import render_sidebar
from application.pages.conversation import render_conversation_page
from application.pages.knowledge_base import render_knowledge_base_page
from application.state.frame import FrameState


def render_index_page() -> rx.Component:
    """
    渲染根页面
    """
    return rx.hstack(
        # 渲染侧边栏
        render_sidebar(),
        # 根据选中侧边栏图标导航按钮渲染相应页面
        rx.match(
            FrameState.sidebar_icon_nav_button,
            # 渲染对话页面
            ("conversation", render_conversation_page()),
            # 渲染知识库页面
            ("knowledge_base", render_knowledge_base_page()),
        ),
        width="100%",  # 宽度
        height="100vh",  # 高度
        padding="8px 8px 8px 0",  # 内边距
        overflow="auto",  # 垂直方向拉伸至父元素高度
        box_sizing="border-box",  # 盒模型
        background="var(--mc-global-bg)",  # 背景颜色
    )