AI-Chat/app/Views/chat.php

<div class="chat-layout" id="chatLayout">
    <!-- 左侧边栏 -->
    <div class="sidebar" id="sidebar">
        <div class="sidebar-header">
            <button class="btn btn-primary btn-sm" onclick="SessionManager.createSession()">+ 新建会话</button>
        </div>
        <div class="session-list" id="sessionList">
            <!-- 由 SessionManager.renderSessionList() 动态渲染 -->
        </div>
    </div>

    <!-- 主聊天区域 -->
    <div class="chat-main">
        <!-- 顶部工具栏 -->
        <div class="toolbar">
            <button class="toggle-sidebar" onclick="toggleSidebar()" title="切换侧边栏">☰</button>
            
            <select id="providerSelect" onchange="onProviderChange()">
                <option value="">选择供应商</option>
                <!-- 由 loadProviders() 动态填充 -->
            </select>
            
            <select id="modelSelect">
                <option value="">选择模型</option>
                <!-- 由 onProviderChange() 动态填充 -->
            </select>
            
            <label class="toggle-switch" title="思考模式">
                <input type="checkbox" id="thinkingMode">
                <span class="slider"></span>
            </label>
            <span style="font-size:12px;color:var(--text-secondary)">思考</span>
            
            <select id="personalitySelect">
                <option value="">默认人格</option>
                <!-- 由 loadPersonalities() 动态填充 -->
            </select>
            
            <a href="/config.php" class="btn btn-secondary btn-sm" style="margin-left:auto;">⚙️ 设置</a>
        </div>

        <!-- 消息列表 -->
        <div class="messages-container" id="messagesContainer">
            <div class="empty-state">
                <h3>开始新的对话</h3>
                <p>输入消息开始聊天</p>
            </div>
        </div>

        <!-- 底部输入区域 -->
        <div class="input-area">
            <div class="file-preview" id="filePreview"></div>
            <div class="input-wrapper">
                <button id="uploadBtn" title="上传文件" style="background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:18px;">📎</button>
                <textarea id="messageInput" rows="1" placeholder="输入消息，Ctrl+Enter 发送..."></textarea>
                <button id="sendBtn">发送</button>
            </div>
        </div>
    </div>
</div>

<script>
// 切换侧边栏
function toggleSidebar() {
    document.getElementById('sidebar').classList.toggle('collapsed');
}

// 供应商/模型数据缓存
let providersData = [];
let personalitiesData = [];

// 加载供应商配置
async function loadProviders() {
    try {
        const res = await api.get('/config');
        providersData = res.data.providers || [];
        const select = document.getElementById('providerSelect');
        select.innerHTML = '<option value="">选择供应商</option>';
        providersData.forEach((p, i) => {
            if (p.enabled) {
                const option = document.createElement('option');
                option.value = i;
                option.textContent = p.name;
                select.appendChild(option);
            }
        });
        // 如果只有一个供应商，自动选择
        if (providersData.filter(p => p.enabled).length === 1) {
            select.value = providersData.findIndex(p => p.enabled);
            onProviderChange();
        }
    } catch (err) {
        console.error('加载供应商配置失败:', err);
    }
}

// 供应商切换时更新模型列表
function onProviderChange() {
    const index = document.getElementById('providerSelect').value;
    const modelSelect = document.getElementById('modelSelect');
    modelSelect.innerHTML = '<option value="">选择模型</option>';
    
    if (index !== '' && providersData[index]) {
        const provider = providersData[index];
        (provider.models || []).forEach(m => {
            const option = document.createElement('option');
            option.value = m;
            option.textContent = m;
            modelSelect.appendChild(option);
        });
        // 如果只有一个模型，自动选择
        if (provider.models && provider.models.length === 1) {
            modelSelect.value = provider.models[0];
        }
        // 如果有默认模型，自动选择
        if (provider.defaultModel) {
            modelSelect.value = provider.defaultModel;
        }
    }
}

// 加载人格列表
async function loadPersonalities() {
    try {
        const res = await api.get('/personalities');
        personalitiesData = res.data || [];
        const select = document.getElementById('personalitySelect');
        select.innerHTML = '<option value="">默认人格</option>';
        personalitiesData.forEach(p => {
            const option = document.createElement('option');
            option.value = p.id;
            option.textContent = (p.icon || '🤖') + ' ' + p.name;
            select.appendChild(option);
        });
    } catch (err) {
        console.error('加载人格列表失败:', err);
    }
}

// 页面初始化
(async function() {
    // 检查认证
    const token = Storage.getToken();
    if (!token) {
        window.location.href = '/login.php';
        return;
    }
    
    // 初始化聊天管理器
    ChatManager.init();
    
    // 加载数据
    await Promise.all([
        loadProviders(),
        loadPersonalities(),
        SessionManager.loadSessions()
    ]);
    
    // 如果有会话，自动选择第一个
    if (SessionManager.sessions.length > 0) {
        await SessionManager.switchSession(SessionManager.sessions[0].id);
    }
})();
</script>