451 lines
14 KiB
JavaScript
451 lines
14 KiB
JavaScript
// ===== index.js (Redis 存储版) =====
|
||
const chatArea = document.getElementById('chatArea');
|
||
const messageInput = document.getElementById('messageInput');
|
||
const submitBtn = document.getElementById('submitBtn');
|
||
const newChatBtn = document.getElementById('newChatBtn');
|
||
const chatList = document.getElementById('chatList');
|
||
const welcomeMessage = document.getElementById('welcomeMessage');
|
||
const toggleSidebarBtn = document.getElementById('toggleSidebar');
|
||
const sidebar = document.getElementById('sidebar');
|
||
|
||
// RAG 相关 DOM
|
||
const ragSelect = document.getElementById('ragSelect');
|
||
const deleteRagBtn = document.getElementById('deleteRagBtn');
|
||
const refreshRagBtn = document.getElementById('refreshRagBtn');
|
||
|
||
let currentEventSource = null;
|
||
let currentChatId = localStorage.getItem('currentChatId') || null;
|
||
|
||
// ==================== Redis 存储相关函数 ====================
|
||
|
||
/**
|
||
* 获取所有聊天会话及其标题
|
||
*/
|
||
async function getAllChats() {
|
||
try {
|
||
const response = await fetch('http://localhost:8095/api/v1/chat');
|
||
const chatIds = await response.json();
|
||
|
||
return Promise.all(chatIds.map(async chatId => {
|
||
const nameResponse = await fetch(`http://localhost:8095/api/v1/chat/${chatId}/name`);
|
||
const name = await nameResponse.text();
|
||
return { chatId, name };
|
||
}));
|
||
} catch (error) {
|
||
console.error('获取聊天列表失败:', error);
|
||
return [];
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 创建新聊天会话
|
||
*/
|
||
async function createNewChat() {
|
||
const chatId = Date.now().toString();
|
||
|
||
try {
|
||
// 设置默认名称
|
||
await fetch(`http://localhost:8095/api/v1/chat/${chatId}/rename`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ name: '新聊天' })
|
||
});
|
||
|
||
currentChatId = chatId;
|
||
localStorage.setItem('currentChatId', chatId);
|
||
|
||
updateChatList();
|
||
clearChatArea();
|
||
return chatId;
|
||
} catch (error) {
|
||
console.error('创建聊天失败:', error);
|
||
throw error;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 删除聊天会话
|
||
*/
|
||
async function deleteChat(chatId) {
|
||
if (!confirm('确定要删除这个聊天记录吗？')) return;
|
||
|
||
try {
|
||
const response = await fetch(`http://localhost:8095/api/v1/chat/${chatId}`, {
|
||
method: 'DELETE'
|
||
});
|
||
|
||
if (response.ok) {
|
||
if (currentChatId === chatId) {
|
||
await createNewChat();
|
||
}
|
||
updateChatList();
|
||
} else {
|
||
throw new Error(`HTTP ${response.status}`);
|
||
}
|
||
} catch (error) {
|
||
console.error('删除聊天失败:', error);
|
||
alert('删除失败: ' + error.message);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 重命名聊天会话
|
||
*/
|
||
async function renameChat(chatId) {
|
||
const currentName = await (await fetch(`http://localhost:8095/api/v1/chat/${chatId}/name`)).text();
|
||
const newName = prompt('请输入新的聊天名称', currentName);
|
||
|
||
if (newName) {
|
||
try {
|
||
await fetch(`http://localhost:8095/api/v1/chat/${chatId}/rename`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ name: newName })
|
||
});
|
||
updateChatList();
|
||
} catch (error) {
|
||
console.error('重命名失败:', error);
|
||
alert('重命名失败: ' + error.message);
|
||
}
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 加载聊天历史
|
||
*/
|
||
async function loadChat(chatId) {
|
||
try {
|
||
const response = await fetch(`http://localhost:8095/chat/${chatId}`);
|
||
const messages = await response.json();
|
||
|
||
currentChatId = chatId;
|
||
localStorage.setItem('currentChatId', chatId);
|
||
clearChatArea();
|
||
|
||
messages.forEach(msg => {
|
||
appendMessage(msg.content, msg.role === 'assistant', false);
|
||
});
|
||
} catch (error) {
|
||
console.error('加载聊天失败:', error);
|
||
alert('加载聊天失败: ' + error.message);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 保存消息到 Redis
|
||
*/
|
||
async function saveMessage(chatId, content, isAssistant) {
|
||
const msg = {
|
||
role: isAssistant ? "assistant" : "user",
|
||
content: content,
|
||
ts: Date.now()
|
||
};
|
||
|
||
try {
|
||
await fetch(`http://localhost:8095/api/v1/chat/${chatId}/message`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(msg)
|
||
});
|
||
} catch (error) {
|
||
console.error('保存消息失败:', error);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 更新聊天列表 UI
|
||
*/
|
||
async function updateChatList() {
|
||
chatList.innerHTML = '';
|
||
const chats = await getAllChats();
|
||
|
||
// 当前聊天置顶
|
||
chats.sort((a, b) => {
|
||
if (a.chatId === currentChatId) return -1;
|
||
if (b.chatId === currentChatId) return 1;
|
||
return parseInt(b.chatId) - parseInt(a.chatId); // 按时间倒序
|
||
});
|
||
|
||
chats.forEach(chat => {
|
||
const li = document.createElement('li');
|
||
li.className = `chat-item flex items-center justify-between p-2 hover:bg-gray-100 rounded-lg cursor-pointer transition-colors ${
|
||
chat.chatId === currentChatId ? 'bg-blue-50' : ''
|
||
}`;
|
||
|
||
const date = new Date(parseInt(chat.chatId)).toLocaleDateString('zh-CN', {
|
||
year: 'numeric',
|
||
month: '2-digit',
|
||
day: '2-digit'
|
||
});
|
||
|
||
li.innerHTML = `
|
||
<div class="flex-1">
|
||
<div class="text-sm font-medium">${chat.name}</div>
|
||
<div class="text-xs text-gray-400">${date}</div>
|
||
</div>
|
||
<div class="chat-actions flex items-center gap-1 opacity-0 transition-opacity duration-200">
|
||
<button class="p-1 hover:bg-gray-200 rounded text-gray-500">重命名</button>
|
||
<button class="p-1 hover:bg-red-200 rounded text-red-500">删除</button>
|
||
</div>
|
||
`;
|
||
|
||
// 事件绑定
|
||
li.querySelectorAll('button')[0].addEventListener('click', (e) => {
|
||
e.stopPropagation();
|
||
renameChat(chat.chatId);
|
||
});
|
||
|
||
li.querySelectorAll('button')[1].addEventListener('click', (e) => {
|
||
e.stopPropagation();
|
||
deleteChat(chat.chatId);
|
||
});
|
||
|
||
li.addEventListener('click', () => loadChat(chat.chatId));
|
||
li.addEventListener('mouseenter', () => {
|
||
li.querySelector('.chat-actions').classList.remove('opacity-0');
|
||
});
|
||
li.addEventListener('mouseleave', () => {
|
||
li.querySelector('.chat-actions').classList.add('opacity-0');
|
||
});
|
||
|
||
chatList.appendChild(li);
|
||
});
|
||
}
|
||
|
||
// ==================== 消息显示相关函数 ====================
|
||
|
||
function clearChatArea() {
|
||
chatArea.innerHTML = '';
|
||
welcomeMessage.style.display = 'flex';
|
||
}
|
||
|
||
function appendMessage(content, isAssistant = false, saveToStorage = true) {
|
||
welcomeMessage.style.display = 'none';
|
||
const messageDiv = document.createElement('div');
|
||
messageDiv.className = `max-w-4xl mx-auto mb-4 p-4 rounded-lg ${
|
||
isAssistant ? 'bg-gray-100' : 'bg-white border'
|
||
} markdown-body relative`;
|
||
|
||
const renderedContent = DOMPurify.sanitize(marked.parse(content));
|
||
messageDiv.innerHTML = renderedContent;
|
||
|
||
const copyBtn = document.createElement('button');
|
||
copyBtn.className = 'absolute top-2 right-2 p-1 bg-gray-200 rounded-md text-xs';
|
||
copyBtn.textContent = '复制';
|
||
copyBtn.onclick = () => {
|
||
navigator.clipboard.writeText(content).then(() => {
|
||
copyBtn.textContent = '已复制';
|
||
setTimeout(() => (copyBtn.textContent = '复制'), 2000);
|
||
});
|
||
};
|
||
messageDiv.appendChild(copyBtn);
|
||
|
||
chatArea.appendChild(messageDiv);
|
||
chatArea.scrollTop = chatArea.scrollHeight;
|
||
|
||
if (saveToStorage && currentChatId) {
|
||
saveMessage(currentChatId, content, isAssistant);
|
||
}
|
||
}
|
||
|
||
// ==================== 事件流处理 ====================
|
||
|
||
function startEventStream(message) {
|
||
if (currentEventSource) currentEventSource.close();
|
||
|
||
const ragTag = ragSelect.value;
|
||
const aiModelSelect = document.getElementById('aiModel');
|
||
const aiModelValue = aiModelSelect.value;
|
||
const aiModelModel = aiModelSelect.options[aiModelSelect.selectedIndex].getAttribute('model');
|
||
|
||
let url;
|
||
const base = `http://localhost:8095/api/v1/${aiModelValue}`;
|
||
const params = new URLSearchParams({ message, model: aiModelModel });
|
||
if (ragTag) {
|
||
params.append('ragTag', ragTag);
|
||
url = `${base}/generate_stream_rag?${params.toString()}`;
|
||
} else {
|
||
url = `${base}/generate_stream?${params.toString()}`;
|
||
}
|
||
|
||
currentEventSource = new EventSource(url);
|
||
let accumulatedContent = '';
|
||
let tempMessageDiv = null;
|
||
|
||
currentEventSource.onmessage = function(event) {
|
||
try {
|
||
const data = JSON.parse(event.data);
|
||
const content = data.result?.output?.content || data.content;
|
||
|
||
if (content) {
|
||
accumulatedContent += content;
|
||
|
||
if (!tempMessageDiv) {
|
||
tempMessageDiv = document.createElement('div');
|
||
tempMessageDiv.className = 'max-w-4xl mx-auto mb-4 p-4 rounded-lg bg-gray-100 markdown-body relative';
|
||
chatArea.appendChild(tempMessageDiv);
|
||
welcomeMessage.style.display = 'none';
|
||
}
|
||
|
||
tempMessageDiv.textContent = accumulatedContent;
|
||
chatArea.scrollTop = chatArea.scrollHeight;
|
||
}
|
||
|
||
if (data.result?.output?.properties?.finishReason === 'STOP') {
|
||
currentEventSource.close();
|
||
|
||
if (tempMessageDiv) {
|
||
tempMessageDiv.innerHTML = DOMPurify.sanitize(marked.parse(accumulatedContent));
|
||
|
||
const copyBtn = document.createElement('button');
|
||
copyBtn.className = 'absolute top-2 right-2 p-1 bg-gray-200 rounded-md text-xs';
|
||
copyBtn.textContent = '复制';
|
||
copyBtn.onclick = () => {
|
||
navigator.clipboard.writeText(accumulatedContent).then(() => {
|
||
copyBtn.textContent = '已复制';
|
||
setTimeout(() => (copyBtn.textContent = '复制'), 2000);
|
||
});
|
||
};
|
||
tempMessageDiv.appendChild(copyBtn);
|
||
}
|
||
|
||
if (currentChatId) {
|
||
saveMessage(currentChatId, accumulatedContent, true);
|
||
}
|
||
}
|
||
} catch (e) {
|
||
console.error('解析事件数据失败:', e);
|
||
}
|
||
};
|
||
|
||
currentEventSource.onerror = function(error) {
|
||
console.error('EventSource 错误:', error);
|
||
currentEventSource.close();
|
||
};
|
||
}
|
||
|
||
// ==================== 事件绑定 ====================
|
||
|
||
submitBtn.addEventListener('click', async () => {
|
||
const message = messageInput.value.trim();
|
||
if (!message) return;
|
||
|
||
if (!currentChatId) {
|
||
await createNewChat();
|
||
}
|
||
|
||
appendMessage(message, false);
|
||
messageInput.value = '';
|
||
startEventStream(message);
|
||
});
|
||
|
||
messageInput.addEventListener('keypress', (e) => {
|
||
if (e.key === 'Enter' && !e.shiftKey) {
|
||
e.preventDefault();
|
||
submitBtn.click();
|
||
}
|
||
});
|
||
|
||
newChatBtn.addEventListener('click', createNewChat);
|
||
|
||
toggleSidebarBtn.addEventListener('click', () => {
|
||
sidebar.classList.toggle('-translate-x-full');
|
||
updateSidebarIcon();
|
||
});
|
||
|
||
function updateSidebarIcon() {
|
||
const iconPath = document.getElementById('sidebarIconPath');
|
||
if (sidebar.classList.contains('-translate-x-full')) {
|
||
iconPath.setAttribute('d', 'M4 6h16M4 12h4m12 0h-4M4 18h16');
|
||
} else {
|
||
iconPath.setAttribute('d', 'M4 6h16M4 12h16M4 18h16');
|
||
}
|
||
}
|
||
|
||
// ==================== 初始化 ====================
|
||
|
||
// 初始化聊天列表
|
||
updateChatList();
|
||
|
||
// 加载当前聊天
|
||
if (currentChatId) {
|
||
loadChat(currentChatId);
|
||
}
|
||
|
||
// 响应式处理
|
||
window.addEventListener('resize', () => {
|
||
if (window.innerWidth > 768) {
|
||
sidebar.classList.remove('-translate-x-full');
|
||
} else {
|
||
sidebar.classList.add('-translate-x-full');
|
||
}
|
||
});
|
||
|
||
if (window.innerWidth <= 768) {
|
||
sidebar.classList.add('-translate-x-full');
|
||
}
|
||
|
||
updateSidebarIcon();
|
||
|
||
/** -------------------------
|
||
* 上传知识下拉菜单（保持你现有 HTML 结构）
|
||
* - 点击按钮展开/收起菜单
|
||
* - 点击外部区域/按下 Esc 关闭
|
||
* - 点击菜单项后自动关闭
|
||
* ------------------------- */
|
||
(function initUploadMenu() {
|
||
const uploadMenuButton = document.getElementById('uploadMenuButton');
|
||
const uploadMenu = document.getElementById('uploadMenu');
|
||
if (!uploadMenuButton || !uploadMenu) return;
|
||
|
||
// 切换菜单显示/隐藏
|
||
const toggleMenu = () => {
|
||
uploadMenu.classList.toggle('hidden');
|
||
};
|
||
|
||
// 显示菜单
|
||
const openMenu = () => {
|
||
uploadMenu.classList.remove('hidden');
|
||
};
|
||
|
||
// 隐藏菜单
|
||
const closeMenu = () => {
|
||
uploadMenu.classList.add('hidden');
|
||
};
|
||
|
||
// 点击按钮展开/收起
|
||
uploadMenuButton.addEventListener('click', (e) => {
|
||
e.stopPropagation();
|
||
toggleMenu();
|
||
});
|
||
|
||
// 键盘辅助：Enter/Space 展开，Esc 关闭
|
||
uploadMenuButton.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Enter' || e.key === ' ') {
|
||
e.preventDefault();
|
||
openMenu();
|
||
} else if (e.key === 'Escape') {
|
||
closeMenu();
|
||
}
|
||
});
|
||
|
||
// 点击菜单项后自动关闭
|
||
uploadMenu.querySelectorAll('a').forEach(a => {
|
||
a.addEventListener('click', () => closeMenu());
|
||
});
|
||
|
||
// 点击外部任意区域关闭
|
||
document.addEventListener('click', (e) => {
|
||
if (!uploadMenu.classList.contains('hidden')) {
|
||
if (!uploadMenu.contains(e.target) && e.target !== uploadMenuButton) {
|
||
closeMenu();
|
||
}
|
||
}
|
||
});
|
||
|
||
// Esc 关闭（全局）
|
||
document.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Escape') closeMenu();
|
||
});
|
||
})();
|