fix: 简化消息发送流程,直接发送完整回复

This commit is contained in:
2026-04-12 18:41:27 +08:00
parent 08c4f79313
commit 23935a1a28
2 changed files with 24 additions and 156 deletions

View File

@@ -364,6 +364,7 @@
// 处理WebSocket消息
function handleWebSocketMessage(data) {
console.log('收到消息:', data.type);
switch (data.type) {
case 'history':
displayHistory(data.messages);
@@ -385,22 +386,10 @@
currentAgentId = data.agent_id;
console.log('Agent已切换:', data.agent_name);
break;
// 流式输出处理
case 'thinking_start':
createStreamingMessage('thinking');
break;
case 'thinking_stream':
appendStreamText('thinking', data.text);
break;
case 'thinking_end':
collapseThinking(data.content);
createStreamingMessage('content');
break;
case 'content_stream':
appendStreamText('content', data.text);
case 'ping':
// 心跳,忽略
break;
case 'stream_end':
finishStreaming();
document.getElementById('sendBtn').disabled = false;
break;
case 'user_message':
@@ -411,8 +400,9 @@
}
break;
case 'assistant_message':
// 流式完成后更新最终消息添加Agent信息等
updateFinalMessage(data.message);
// 直接显示完整回复
appendMessage('assistant', data.message.content, data.message.source, data.message.thinking_content, data.message.agent_name);
document.getElementById('sendBtn').disabled = false;
break;
case 'error':
showError(data.message);
@@ -421,109 +411,6 @@
}
}
// 创建流式消息容器
function createStreamingMessage(type) {
const container = document.getElementById('messagesContainer');
container.querySelector('.welcome')?.remove();
const existingStream = document.getElementById('streaming-message');
if (existingStream && type === 'content') return; // 回答区域已存在
const div = document.createElement('div');
div.id = 'streaming-message';
div.className = 'message assistant';
if (type === 'thinking') {
div.innerHTML = `
<div class="message-avatar">🤔</div>
<div class="message-content">
<div class="thinking-stream" id="thinking-stream" style="background:#f8f9fa;border-left:3px solid #667eea;padding:12px;font-size:14px;color:#667eea;">
<strong>💭 思考过程</strong><br>
<span id="thinking-text"></span>
</div>
</div>
`;
} else {
div.innerHTML = `
<div class="message-avatar">🤖</div>
<div class="message-content">
<div id="thinking-collapsed" style="display:none;"></div>
<span id="content-text"></span>
</div>
`;
}
container.appendChild(div);
container.scrollTop = container.scrollHeight;
}
// 追加流式文本
function appendStreamText(type, text) {
const textEl = document.getElementById(type === 'thinking' ? 'thinking-text' : 'content-text');
if (textEl) {
textEl.textContent += text;
const container = document.getElementById('messagesContainer');
container.scrollTop = container.scrollHeight;
}
}
// 折叠思考内容
function collapseThinking(content) {
const streamEl = document.getElementById('thinking-stream');
if (streamEl) {
// 创建折叠版本
const collapsedDiv = document.getElementById('thinking-collapsed');
if (collapsedDiv) {
collapsedDiv.style.display = 'block';
collapsedDiv.innerHTML = `
<div class="thinking-collapsed" onclick="toggleThinkingBlock(this)" style="cursor:pointer;background:#f0f0f0;padding:8px 12px;border-radius:4px;margin-bottom:8px;font-size:13px;color:#667eea;">
<i class="ri-lightbulb-line"></i> 思考过程 <span class="toggle-hint">(点击展开)</span>
</div>
<div class="thinking-expanded" style="display:none;background:#f8f9fa;border-left:3px solid #667eea;padding:12px;font-size:14px;margin-bottom:12px;">
${formatContent(content)}
</div>
`;
}
streamEl.style.display = 'none';
}
}
// 展开/折叠思考内容
function toggleThinkingBlock(el) {
const expanded = el.parentElement.querySelector('.thinking-expanded');
const hint = el.querySelector('.toggle-hint');
if (expanded.style.display === 'none') {
expanded.style.display = 'block';
hint.textContent = '(点击折叠)';
} else {
expanded.style.display = 'none';
hint.textContent = '(点击展开)';
}
}
// 完成流式输出
function finishStreaming() {
const streamMsg = document.getElementById('streaming-message');
if (streamMsg) {
streamMsg.id = ''; // 移除临时ID
}
}
// 更新最终消息添加Agent信息
function updateFinalMessage(msg) {
const messages = document.querySelectorAll('.message.assistant');
const lastMsg = messages[messages.length - 1];
if (lastMsg && msg.agent_name) {
const contentDiv = lastMsg.querySelector('.message-content');
if (contentDiv && !contentDiv.querySelector('.agent-info')) {
const agentInfo = document.createElement('div');
agentInfo.className = 'agent-info';
agentInfo.style.cssText = 'font-size:12px;color:#999;margin-top:8px;';
agentInfo.innerHTML = `<i class="ri-robot-line"></i> ${msg.agent_name}`;
contentDiv.appendChild(agentInfo);
}
}
}
// 显示错误
function showError(msg) {
const container = document.getElementById('messagesContainer');