<think>我们现在的目标是在现有的index.
html基础上添加会话管理功能，包括：
1. 在页面上添加一个“新建会话”按钮和一个会话选择下拉框。
2. 实现新建会话的功能（调用后端的/new_session端点）。
3. 在发送消息时携带当前会话ID（session_id）。
4. 当切换会话时，清空当前聊天
显示区域并加载该会话的历史消息（需要后端支持历史消息获取，但当前后端没有提供获取历史消息的接口，所以这里我们先实现切换会话时清空当前聊天
显示，并记录会话ID，后续消息将关联到该会话）。
由于当前后端没有提供获取历史消息的接口，因此我们暂时不实现历史消息的加载，只实现会话的创建和切换（切换时清空当前聊天界面）。
我们将对index.
html进行以下修改：
- 在标题下方添加一个会话控制栏（包含“新建会话”按钮和会话选择下拉框）。
- 添加一些CSS样式美化这个控制栏。
- 添加JavaScript代码处理新建会话和会话切换。
注意：原功能中，用户输入框和发送按钮已经存在，我们保留不变。
修改后的index.
html如下：</think>我将基于你现有的 `index.
html` 文件，集成会话管理功能，同时保持原有聊天功能不变。以下是完整的实现方案：
```
html
<!DOCTYPE
html>
<
html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>本地大模型聊天</title>
<style>
body {
font-family: "Microsoft YaHei", sans-serif;
background-color: #f4f6f8;
color: #333;
margin: 0;
padding: 20px;
}
h1 {
color: #2c3e
50;
margin-bottom:
5px;
}
.subtitle {
font-size: 14px;
color: #7f8c8d;
margin-bottom: 1
5px;
}
/* 会话管理区域 */
.session-control {
display: flex;
gap: 10px;
margin-bottom: 1
5px;
align-items: center;
}
.session-control button {
padding: 8px 12px;
font-size: 14px;
background-color: #27ae60;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
.session-control button:hover {
background-color: #2196
53;
}
.session-control select {
padding: 8px;
border-radius: 4px;
border: 1px solid #ddd;
min-width: 200px;
background-color: white;
}
.session-info {
font-size: 14px;
color: #7f8c8d;
margin-left: auto;
}
/* 聊天区域 */
#chat {
border: 1px solid #ccc;
padding: 10px;
height: 400px;
overflow-y: auto;
background-color: white;
margin-bottom: 10px;
border-radius:
5px;
}
/* 输入区域 */
.input-area {
display: flex;
gap: 10px;
}
input[type="text"] {
flex-grow: 1;
padding: 10px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 4px;
}
button#sendBtn {
padding: 10px 1
5px;
font-size: 16px;
background-color: #3498db;
color: white;
border: none;
border-radius:
5px;
cursor: pointer;
transition: background-color 0.3s;
}
button#sendBtn:hover {
background-color: #2980b9;
}
/* 消息样式 */
.user, .bot {
margin: 10px 0;
padding: 10px;
border-radius:
5px;
}
.user {
background-color: #d1ecf1;
text-align: right;
}
.bot {
background-color: #e2f0d9;
}
</style>
</head>
<body>
<h1>你好！我是本地大模型助手</h1>
<div class="subtitle">支持多会话管理，每个会话有独立的上下文记忆</div>
<!-- 会话管理区域 -->
<div class="session-control">
<button id="newSessionBtn">新建会话</button>
<select id="sessionSelect">
<option value="default">默认会话</option>
</select>
<div class="session-info">会话ID: <span id="sessionIdDisplay">default</span></div>
</div>
<!-- 聊天
显示区域 -->
<div id="chat"></div>
<!-- 输入区域 -->
<div class="input-area">
<input type="text" id="input" placeholder="输入问题..." />
<button id="sendBtn" onclick="send()">发送</button>
</div>
<script>
const chat = document.getElementById("chat");
const sessionSelect = document.getElementById("sessionSelect");
const sessionIdDisplay = document.getElementById("sessionIdDisplay");
let currentSession = 'default';
// 初始化会话管理
function initSessions() {
// 尝试从本地存储加载会话列表
const savedSessions = localStorage.getItem('chatSessions');
if (savedSessions) {
const sessions = JSON.parse(savedSessions);
// 清空并重新填充会话选择框
sessionSelect.inner
HTML = '';
sessions.forEach(session => {
const option = document.createElement('option');
option.value = session.id;
option.textContent = session.name;
sessionSelect.appendChild(option);
});
// 设置当前会话
currentSession = sessions[0].id;
sessionIdDisplay.textContent = currentSession;
}
}
// 新建会话
document.getElementById('newSessionBtn').addEventListener('click', () => {
fetch('/new_session', {
method: 'POST'
})
.then(res => res.json())
.then(data => {
// 创建新会话选项
const newSessionId = data.session_id;
const sessionName = `会话 ${sessionSelect.options.length + 1}`;
const option = document.createElement('option');
option.value = newSessionId;
option.textContent = sessionName;
option.selected = true;
sessionSelect.appendChild(option);
// 更新当前会话
currentSession = newSessionId;
sessionIdDisplay.textContent = currentSession;
// 清空聊天区域
chat.inner
HTML = '';
// 保存会话列表到本地存储
saveSessionsToLocalStorage();
});
});
// 切换会话
sessionSelect.addEventListener('change', () => {
currentSession = sessionSelect.value;
sessionIdDisplay.textContent = currentSession;
// 清空聊天区域（实际应用中应加载该会话的历史记录）
chat.inner
HTML = '';
//
显示提示消息
appendMessage("系统", `已切换到会话: ${sessionSelect.options[sessionSelect.selectedIndex].textContent}`, "bot");
});
// 保存会话列表到本地存储
function saveSessionsToLocalStorage() {
const sessions = [];
for (let i = 0; i < sessionSelect.options.length; i++) {
sessions.push({
id: sessionSelect.options[i].value,
name: sessionSelect.options[i].textContent
});
}
localStorage.setItem('chatSessions', JSON.stringify(sessions));
}
// 发送消息
function send() {
const input = document.getElementById("input");
const msg = input.value.trim();
if (!msg) return;
appendMessage("你", msg, "user");
// 发送请求到后端
fetch("/chat", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
message: msg,
session_id: currentSession // 包含会话ID
})
}).then(res => res.json()).then(data => {
appendMessage("助手", data.response, "bot");
});
input.value = "";
}
// 添加消息到聊天区域
function appendMessage(who, text, cls) {
const div = document.createElement("div");
div.className = cls;
div.inner
HTML = `<strong>${who}：</strong>${text}`;
chat.appendChild(div);
chat.scrollTop = chat.scrollHeight;
return div;
}
// 页面加载时初始化会话
window.onload = initSessions;
// 添加回车键发送功能
document.getElementById("input").addEventListener("keypress", function(e) {
if (e.key === "Enter") {
send();
}
});
</script>
</body>
</
html>
```
### 代码解释：
1. **会话管理功能**：
- 添加了会话控制栏，包含"新建会话"按钮和会话选择下拉框
- 每个会话有唯一的session_id，由后端生成
- 会话列表保存在浏览器的localStorage中，刷新页面不会丢失
2. **用户界面改进**：
- 添加了会话信息
显示区域，
显示当前会话ID
- 优化了布局结构，使界面更加清晰
- 添加了悬停效果和过渡动画提升用户体验
3. **核心功能实现**：
- **新建会话**：点击按钮调用`/new_session`接口创建新会话
- **切换会话**：选择不同会话时清空聊天区域并
显示提示信息
- **发送消息**：包含当前会话ID，确保上下文正确关联
- **本地存储**：使用localStorage保存会话列表，避免页面刷新丢失
4. **用户体验增强**：
- 添加了回车键发送功能（Enter键）
- 会话切换时
显示系统提示信息
- 下拉框
显示友好的会话名称（如"会话 1"、"会话 2"）
- 按钮添加悬停效果，提升交互感
### 功能工作流程：
1. **页面加载**：
- 从localStorage加载保存的会话列表
- 初始化界面，
显示默认会话
2. **新建会话**：
```mermaid
sequenceDiagram
participant 用户
participant 前端
participant 后端
用户->>前端: 点击"新建会话"
前端->>后端: POST /new_session
后端-->>前端: 返回新session_id
前端->>前端: 添加新会话选项
前端->>前端: 清空聊天区域
前端->>前端: 保存会话列表到localStorage
```
3. **发送消息**：
```mermaid
sequenceDiagram
participant 用户
participant 前端
participant 后端
用户->>前端: 输入消息并发送
前端->>后端: POST /chat (包含session_id)
后端->>后端: 处理请求并调用模型
后端-->>前端: 返回模型响应
前端->>前端:
显示消息到聊天区域
```
4. **切换会话**：
```mermaid
sequenceDiagram
participant 用户
participant 前端
用户->>前端: 选择不同会话
前端->>前端: 更新当前会话ID
显示
前端->>前端: 清空聊天区域
前端->>前端:
显示会话切换提示
```
### 使用说明：
1. **首次使用**：
- 页面加载时自动创建默认会话（session_id = "default"）
- 聊天消息会关联到当前会话
2. **创建新会话**：
- 点击"新建会话"按钮创建独立对话环境
- 每个会话有独立的上下文记忆
- 会话列表会自动保存，刷新页面不会丢失
3. **切换会话**：
- 从下拉框选择不同会话
- 聊天区域会清空（实际应用中可加载历史记录）
- 系统会
显示当前会话的提示信息
4. **发送消息**：
- 在输入框中输入
内容，点击"发送"或按Enter键
- 消息会发送到当前选中的会话
- 模型响应会
显示在聊天区域
这个实现完全兼容你原有的聊天功能，添加了完整的会话管理支持，同时保持了简洁的用户界面和良好的用户体验。
扫一扫
7916
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
