ailine/frontend/src/frontend_main.py

"""
AI Agent 前端主入口
采用模块化架构，仅负责组装各组件
"""

import sys
import os

# 添加当前目录到路径，确保智能导入能工作
src_dir = os.path.dirname(os.path.abspath(__file__))
sys.path.insert(0, src_dir)

import streamlit as st

# 智能导入：作为 __main__ 被 Streamlit 运行时用绝对导入，否则用相对导入
if __name__ == '__main__':
    from config import config
    from state import AppState
    from components.sidebar import render_sidebar
    from components.chat_area import render_chat_area
    from components.info_panel import render_info_panel
else:
    from .config import config
    from .state import AppState
    from .components.sidebar import render_sidebar
    from .components.chat_area import render_chat_area
    from .components.info_panel import render_info_panel


# =============================================================================
# 页面配置
# =============================================================================
st.set_page_config(
    page_title=config.page_title,
    page_icon=config.page_icon,
    layout=config.layout
)


# =============================================================================
# 初始化状态
# =============================================================================
AppState.init()

def apply_custom_css():
    """应用自定义CSS样式，实现极简风格"""
    st.markdown("""
        <style>
        /* 移除顶部默认空白 */
        .block-container {
            padding-top: 2rem !important;
            padding-bottom: 2rem !important;
        }
        
        /* 侧边栏样式优化：降低背景色对比度，稍微暗一点提高区分度 */
        [data-testid="stSidebar"] {
            background-color: #f0f2f5 !important;
            border-right: 1px solid #e1e4e8;
        }
        
        /* 隐藏标题和头像边框的粗重线条 */
        hr {
            margin: 1em 0;
            border-color: #eee;
        }
        
        /* 自定义按钮样式：去除强烈的背景色，使用浅色线框或扁平风 */
        .stButton>button {
            border-radius: 8px;
            font-weight: 500;
        }
        
        /* 覆盖 Primary 按钮默认的刺眼大红色，改为柔和的深色高亮 */
        .stButton>button[kind="primary"] {
            background-color: #e5e7eb !important;
            color: #1f2937 !important;
            border: 1px solid #d1d5db !important;
        }
        
        /* 覆盖 Primary 按钮悬停效果 */
        .stButton>button[kind="primary"]:hover {
            background-color: #d1d5db !important;
            border-color: #9ca3af !important;
            color: #111827 !important;
        }
        
        /* 普通按钮悬停效果 */
        .stButton>button:hover {
            border-color: #9ca3af;
            color: #1f2937;
            background-color: #f9fafb;
        }
        
        /* 聊天输入框美化 */
        [data-testid="stChatInput"] {
            border-radius: 12px;
            border: 1px solid #e0e0e0;
            box-shadow: 0 2px 10px rgba(0,0,0,0.03);
        }
        
        /* 用户和 AI 的头像调整 */
        .stChatMessage {
            padding: 1rem 0;
            border-bottom: 1px solid #f8f8f8;
        }
        </style>
    """, unsafe_allow_html=True)


# =============================================================================
# 主界面
# =============================================================================
def main():
    """主界面渲染 - 极简宽屏布局"""
    # 应用 CSS
    apply_custom_css()
    
    # 顶部标题（可选，也可以不放，让界面更像对话框）
    st.markdown("<h3 style='text-align: center; font-weight: 400; color: #555; margin-bottom: 2rem;'>个人助手</h3>", unsafe_allow_html=True)

    # 左侧边栏：合并用户登录、模型选择和历史对话
    with st.sidebar:
        render_sidebar()
        # 将原本右侧的信息面板简化并移入侧边栏底部
        st.divider()
        render_info_panel()

    # 中间主区域：全宽的聊天区域
    render_chat_area()


if __name__ == "__main__":
    main()