<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Agent</title>
    <link rel="stylesheet" href="static/style.css">
</head>
<body>
    <div class="app">
        <!-- 左侧会话列表 -->
        <aside class="sidebar" id="sidebar">
            <div class="sidebar-header">
                <div class="logo">
                    <div class="logo-icon">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M12 3L20 7.5V16.5L12 21L4 16.5V7.5L12 3Z"/>
                            <path d="M12 12L20 7.5"/>
                            <path d="M12 12V21"/>
                            <path d="M12 12L4 7.5"/>
                        </svg>
                    </div>
                    <span class="logo-text">AI Agent</span>
                </div>
                <button class="sidebar-close" id="sidebarClose" aria-label="关闭侧边栏">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M18 6L6 18M6 6l12 12"/>
                    </svg>
                </button>
            </div>
            
            <button class="new-chat-btn" id="newChatBtn">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M12 5v14M5 12h14"/>
                </svg>
                <span>新建会话</span>
            </button>
            
            <div class="chat-list" id="chatList">
                <!-- 会话列表将通过JS动态生成 -->
            </div>

            <div class="theme-switcher">
                <div class="theme-slider"></div>
                <button data-theme="light">Light</button>
                <button data-theme="dark">Dark</button>
                <button data-theme="claude">Claude</button>
            </div>
            
            <div class="sidebar-footer">
                <div class="footer-row">
                    <span>AI Agent © 2026</span>
                    <button id="logoutBtn" class="logout-btn" title="注销">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2">
                            <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
                            <polyline points="16 17 21 12 16 7"/>
                            <line x1="21" y1="12" x2="9" y2="12"/>
                        </svg>
                        <span>注销</span>
                    </button>
                </div>
            </div>
        </aside>

        <!-- 遮罩层（移动端） -->
        <div class="sidebar-overlay" id="sidebarOverlay"></div>

        <!-- 主内容区 -->
        <main class="main">
            <!-- 移动端头部 -->
            <header class="mobile-header">
                <button class="menu-btn" id="menuBtn" aria-label="打开菜单">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M3 12h18M3 6h18M3 18h18"/>
                    </svg>
                </button>
                <span class="mobile-title">AI Agent</span>
                <div class="mobile-spacer"></div>
            </header>

            <!-- 消息输出区 -->
            <div class="chat-output" id="chatOutput">
                <!-- 消息将通过JS动态生成 -->
            </div>

            <!-- 输入区 -->
            <div class="input-area">
                <div class="input-container">
                    <div class="input-wrapper">
                        <div class="agent-status-bar" id="agent-status-bar">
                            <span id="agent-status-dot"></span>
                            <span id="agent-status-text">Agent Idle</span>
                        </div>
                        <textarea 
                            class="chat-input" 
                            id="chatInput" 
                            placeholder="输入你的问题，AI Agent 将为你解答..."
                            rows="1"
                        ></textarea>
                        <div class="input-actions">
                            <button class="input-btn" id="attachBtn" title="添加附件">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"/>
                                </svg>
                            </button>
                            <button class="input-btn" id="voiceBtn" title="语音输入">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"/>
                                    <path d="M19 10v2a7 7 0 01-14 0v-2"/>
                                    <path d="M12 19v4M8 23h8"/>
                                </svg>
                            </button>
                            <!-- 发送按钮（移至此处） -->
                            <button class="send-btn" id="sendBtn">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="input-hint">
                    <span>所有内容均由 AI 生成，内容仅供参考，请仔细甄别</span>
                </div>
            </div>
            <button id="scrollBtn">↓ New</button>
        </main>
    </div>
    <script src="static/marked.min.js"></script>
    <script src="static/app.js"></script>
</body>
</html>
