468 lines
17 KiB
JavaScript
468 lines
17 KiB
JavaScript
/**
|
||
* 流式状态显示组件
|
||
* 用于显示RAG检索过程的实时状态
|
||
*/
|
||
class StreamStatusDisplay {
|
||
constructor(container) {
|
||
this.container = container;
|
||
this.statusElements = {};
|
||
this.retrievalHistory = []; // 记录检索历史
|
||
this.statusHistory = []; // 记录所有状态历史
|
||
this.maxDisplayItems = 3; // 最多显示3条状态
|
||
this.eventQueue = []; // 事件队列
|
||
this.isProcessing = false; // 是否正在处理队列
|
||
this.minDisplayTime = 500; // 每个状态最少显示500ms
|
||
this.init();
|
||
}
|
||
|
||
init() {
|
||
// 创建状态显示区域
|
||
this.statusArea = document.createElement('div');
|
||
this.statusArea.className = 'stream-status-area';
|
||
this.statusArea.style.cssText = `
|
||
padding: 12px 16px;
|
||
background: linear-gradient(135deg, #f6f9fc 0%, #f0f4f8 100%);
|
||
border-radius: 12px;
|
||
margin-bottom: 16px;
|
||
font-size: 14px;
|
||
color: #475569;
|
||
min-height: 48px;
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
`;
|
||
|
||
// 添加动画背景
|
||
const animBg = document.createElement('div');
|
||
animBg.style.cssText = `
|
||
position: absolute;
|
||
top: 0;
|
||
left: -100%;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.1), transparent);
|
||
animation: shimmer 2s infinite;
|
||
`;
|
||
this.statusArea.appendChild(animBg);
|
||
|
||
// 添加CSS动画
|
||
if (!document.getElementById('stream-status-styles')) {
|
||
const style = document.createElement('style');
|
||
style.id = 'stream-status-styles';
|
||
style.textContent = `
|
||
@keyframes shimmer {
|
||
0% { left: -100%; }
|
||
100% { left: 100%; }
|
||
}
|
||
@keyframes pulse {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0.5; }
|
||
}
|
||
@keyframes rotate {
|
||
from { transform: rotate(0deg); }
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
.status-icon {
|
||
font-size: 20px;
|
||
animation: pulse 1.5s ease-in-out infinite;
|
||
}
|
||
.status-spinner {
|
||
animation: rotate 1s linear infinite;
|
||
}
|
||
`;
|
||
document.head.appendChild(style);
|
||
}
|
||
|
||
// 状态内容容器
|
||
this.contentArea = document.createElement('div');
|
||
this.contentArea.style.cssText = `
|
||
position: relative;
|
||
z-index: 1;
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
`;
|
||
this.statusArea.appendChild(this.contentArea);
|
||
|
||
this.container.appendChild(this.statusArea);
|
||
}
|
||
|
||
updateStatus(event) {
|
||
// 清除淡出定时器
|
||
if (this.fadeTimeout) {
|
||
clearTimeout(this.fadeTimeout);
|
||
}
|
||
|
||
switch (event.type) {
|
||
case 'cache_hit':
|
||
case 'cache':
|
||
if (event.cached) {
|
||
this.showCacheHit();
|
||
} else {
|
||
this.showCacheMiss();
|
||
}
|
||
break;
|
||
|
||
case 'cache_miss':
|
||
this.showCacheMiss();
|
||
break;
|
||
|
||
case 'starting':
|
||
this.showStatus('🔍 开始分析查询...', '#6366f1');
|
||
break;
|
||
|
||
case 'complexity_check':
|
||
const complexity = event.data;
|
||
if (complexity) {
|
||
if (complexity.is_complex) {
|
||
this.showStatus(
|
||
`📊 复杂查询 (${complexity.level || '高'}) - 置信度: ${(complexity.confidence * 100).toFixed(1)}%`,
|
||
'#f59e0b'
|
||
);
|
||
} else {
|
||
this.showStatus(
|
||
`📊 简单查询 - 置信度: ${(complexity.confidence * 100).toFixed(1)}%`,
|
||
'#10b981'
|
||
);
|
||
}
|
||
}
|
||
break;
|
||
|
||
case 'documents':
|
||
const docs = event.data;
|
||
if (docs) {
|
||
// 记录检索历史
|
||
this.retrievalHistory.push({
|
||
count: docs.count,
|
||
new_docs: docs.new_docs || 0,
|
||
is_incremental: docs.is_incremental || false,
|
||
retrieval_type: docs.retrieval_type || '检索',
|
||
retrieval_reason: docs.retrieval_reason || ''
|
||
});
|
||
|
||
// 根据是否是增量检索显示不同信息
|
||
let message = '';
|
||
if (docs.is_incremental) {
|
||
// 增量检索（第二次及以后）
|
||
const reason = docs.retrieval_reason || '继续检索';
|
||
message = `📚 ${reason}：新增 ${docs.new_docs || 0} 篇文档（总计 ${docs.count} 篇）`;
|
||
this.showStatus(message, '#8b5cf6'); // 紫色表示增量
|
||
} else {
|
||
// 初始检索
|
||
message = `📚 已检索 ${docs.count} 篇文档`;
|
||
if (docs.retrieval_type) {
|
||
message = `📚 ${docs.retrieval_type}：${docs.count} 篇文档`;
|
||
}
|
||
this.showStatus(message, '#6366f1'); // 蓝色表示初始
|
||
}
|
||
|
||
// 显示检索历史汇总
|
||
if (this.retrievalHistory.length > 1) {
|
||
this.showRetrievalSummary();
|
||
}
|
||
|
||
// 显示来源文档
|
||
if (docs.sources && docs.sources.length > 0) {
|
||
this.addSources(docs.sources);
|
||
}
|
||
}
|
||
break;
|
||
|
||
case 'sufficiency_check':
|
||
const sufficient = event.data;
|
||
if (sufficient) {
|
||
// 置信度可能是数字或未定义
|
||
const confidence = sufficient.confidence !== undefined ? sufficient.confidence : 0.5;
|
||
if (sufficient.is_sufficient) {
|
||
this.showStatus(
|
||
`✅ 信息充分 (置信度: ${(confidence * 100).toFixed(1)}%)`,
|
||
'#10b981'
|
||
);
|
||
} else {
|
||
this.showStatus(
|
||
`⚠️ 信息不足，继续检索... (置信度: ${(confidence * 100).toFixed(1)}%)`,
|
||
'#f59e0b'
|
||
);
|
||
}
|
||
}
|
||
break;
|
||
|
||
case 'sub_queries':
|
||
const queries = event.data;
|
||
if (queries && queries.length > 0) {
|
||
this.showStatus(`🔄 生成了 ${queries.length} 个子查询`, '#8b5cf6');
|
||
this.showSubQueries(queries);
|
||
}
|
||
break;
|
||
|
||
case 'iteration':
|
||
const iter = event.data;
|
||
if (iter) {
|
||
// 只显示当前轮次，不显示最大轮次
|
||
this.showStatus(`🔄 第 ${iter.current} 轮迭代`, '#6366f1');
|
||
}
|
||
break;
|
||
|
||
case 'generating':
|
||
// 不要在这里调用scheduleFadeOut
|
||
this.showStatus('✨ 正在生成答案...', '#f59e0b'); // 使用黄色表示进行中
|
||
break;
|
||
|
||
case 'cached':
|
||
this.showStatus('💾 结果已缓存', '#10b981');
|
||
this.scheduleFadeOut();
|
||
break;
|
||
|
||
case 'complete':
|
||
this.showStatus('✅ 答案生成完成', '#10b981');
|
||
// 答案生成完成后，2秒后自动消失
|
||
setTimeout(() => {
|
||
this.fadeOutAndHide();
|
||
}, 2000);
|
||
break;
|
||
|
||
case 'cancelled':
|
||
// 清除之前的所有状态
|
||
this.statusHistory = [];
|
||
// 显示取消状态
|
||
this.showStatus('⚠️ 任务已停止', '#ef4444');
|
||
// 1.5秒后淡出
|
||
setTimeout(() => {
|
||
this.fadeOutAndHide();
|
||
}, 1500);
|
||
break;
|
||
|
||
default:
|
||
if (event.message) {
|
||
this.showStatus(event.message, '#6366f1');
|
||
}
|
||
}
|
||
}
|
||
|
||
showStatus(message, color = '#6366f1') {
|
||
// 添加到历史记录
|
||
this.statusHistory.push({
|
||
message: message,
|
||
color: color,
|
||
timestamp: Date.now()
|
||
});
|
||
|
||
// 使用独立的渲染方法
|
||
this.renderStatuses();
|
||
}
|
||
|
||
showCacheHit() {
|
||
this.statusArea.style.background = 'linear-gradient(135deg, #dcfce7 0%, #d1fae5 100%)';
|
||
this.statusArea.style.borderLeft = '3px solid #10b981';
|
||
this.contentArea.innerHTML = `
|
||
<div class="status-icon" style="color: #10b981;">📦</div>
|
||
<div class="status-message" style="color: #065f46; font-weight: 500;">
|
||
使用缓存结果（伪流式输出）
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
showCacheMiss() {
|
||
this.statusArea.style.background = 'linear-gradient(135deg, #fef3c7 0%, #fde68a 100%)';
|
||
this.statusArea.style.borderLeft = '3px solid #f59e0b';
|
||
this.contentArea.innerHTML = `
|
||
<div class="status-icon status-spinner" style="color: #f59e0b;">🔍</div>
|
||
<div class="status-message" style="color: #78350f; font-weight: 500;">
|
||
开始实时检索...
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
showSubQueries(queries) {
|
||
const maxDisplay = 3;
|
||
const displayQueries = queries.slice(0, maxDisplay);
|
||
const remaining = queries.length - maxDisplay;
|
||
|
||
// 构建子查询列表HTML
|
||
const queriesList = displayQueries.map((q, i) =>
|
||
`${i + 1}. ${q.length > 30 ? q.substring(0, 30) + '...' : q}`
|
||
).join('<br>');
|
||
|
||
const moreText = remaining > 0 ? `<br>... 还有 ${remaining} 个` : '';
|
||
|
||
// 更新最后一个状态的消息，添加子查询列表
|
||
if (this.statusHistory.length > 0) {
|
||
const lastStatus = this.statusHistory[this.statusHistory.length - 1];
|
||
// 如果消息中还没有子查询列表，就添加
|
||
if (!lastStatus.message.includes('<br>')) {
|
||
lastStatus.message += `<br><span style="color: #4f46e5; font-size: 12px; margin-left: 32px;">${queriesList}${moreText}</span>`;
|
||
// 重新渲染
|
||
this.renderStatuses();
|
||
}
|
||
}
|
||
}
|
||
|
||
showRetrievalSummary() {
|
||
// 显示检索历史汇总
|
||
const totalRounds = this.retrievalHistory.length;
|
||
const totalDocs = this.retrievalHistory[this.retrievalHistory.length - 1].count;
|
||
|
||
// 创建一个小的汇总显示
|
||
const summaryHtml = `
|
||
<span style="
|
||
display: inline-block;
|
||
margin-left: 12px;
|
||
padding: 2px 8px;
|
||
background: rgba(99, 102, 241, 0.1);
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
color: #6366f1;
|
||
">共 ${totalRounds} 轮检索</span>
|
||
`;
|
||
|
||
// 添加到当前状态显示中
|
||
if (!this.contentArea.querySelector('.retrieval-summary')) {
|
||
const summarySpan = document.createElement('span');
|
||
summarySpan.className = 'retrieval-summary';
|
||
summarySpan.innerHTML = summaryHtml;
|
||
this.contentArea.appendChild(summarySpan);
|
||
} else {
|
||
this.contentArea.querySelector('.retrieval-summary').innerHTML = summaryHtml;
|
||
}
|
||
}
|
||
|
||
addSources(sources) {
|
||
// 不单独添加，而是将来源信息合并到最新的状态消息中
|
||
const maxDisplay = 3;
|
||
const displaySources = sources.slice(0, maxDisplay);
|
||
const sourceText = displaySources.join(', ');
|
||
const moreText = sources.length > maxDisplay ? ` 等${sources.length}个` : '';
|
||
|
||
// 更新最后一个状态的消息，添加来源信息
|
||
if (this.statusHistory.length > 0) {
|
||
const lastStatus = this.statusHistory[this.statusHistory.length - 1];
|
||
// 如果消息中还没有来源信息，就添加
|
||
if (!lastStatus.message.includes('来源:')) {
|
||
lastStatus.message += `<br><span style="color: #64748b; font-size: 12px; margin-left: 32px;">来源: ${sourceText}${moreText}</span>`;
|
||
// 重新渲染
|
||
this.renderStatuses();
|
||
}
|
||
}
|
||
}
|
||
|
||
renderStatuses() {
|
||
// 抽取渲染逻辑为独立方法
|
||
const recentStatuses = this.statusHistory.slice(-this.maxDisplayItems);
|
||
|
||
this.contentArea.innerHTML = `
|
||
<div style="display: flex; flex-direction: column; gap: 8px;">
|
||
${recentStatuses.map((status, index) => {
|
||
const isLatest = index === recentStatuses.length - 1;
|
||
const opacity = isLatest ? 1 : 0.6;
|
||
return `
|
||
<div style="
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
opacity: ${opacity};
|
||
padding: ${isLatest ? '8px 0' : '4px 0'};
|
||
border-bottom: ${!isLatest ? '1px solid rgba(226, 232, 240, 0.5)' : 'none'};
|
||
">
|
||
<div class="status-icon" style="color: ${status.color}; font-size: ${isLatest ? '20px' : '16px'};">⚡</div>
|
||
<div class="status-message" style="
|
||
color: #334155;
|
||
font-weight: ${isLatest ? '500' : '400'};
|
||
font-size: ${isLatest ? '14px' : '12px'};
|
||
">
|
||
${status.message}
|
||
</div>
|
||
</div>
|
||
`;
|
||
}).join('')}
|
||
</div>
|
||
`;
|
||
|
||
// 更新背景色
|
||
if (recentStatuses.length > 0) {
|
||
const latestStatus = recentStatuses[recentStatuses.length - 1];
|
||
this.statusArea.style.background = `linear-gradient(135deg, ${this.hexToRgba(latestStatus.color, 0.05)} 0%, ${this.hexToRgba(latestStatus.color, 0.1)} 100%)`;
|
||
this.statusArea.style.borderLeft = `3px solid ${latestStatus.color}`;
|
||
}
|
||
}
|
||
|
||
scheduleFadeOut() {
|
||
// 清除之前的定时器
|
||
if (this.fadeTimeout) {
|
||
clearTimeout(this.fadeTimeout);
|
||
}
|
||
// 5秒后淡出
|
||
this.fadeTimeout = setTimeout(() => {
|
||
this.fadeOut();
|
||
}, 5000);
|
||
}
|
||
|
||
fadeOut() {
|
||
this.statusArea.style.opacity = '0.3';
|
||
this.statusArea.style.transform = 'scale(0.98)';
|
||
// 不完全隐藏，保留淡化状态
|
||
// setTimeout(() => {
|
||
// this.statusArea.style.display = 'none';
|
||
// }, 300);
|
||
}
|
||
|
||
fadeOutAndHide() {
|
||
// 添加过渡动画
|
||
this.statusArea.style.transition = 'all 0.5s ease-out';
|
||
this.statusArea.style.opacity = '0';
|
||
this.statusArea.style.transform = 'scale(0.95)';
|
||
this.statusArea.style.maxHeight = this.statusArea.offsetHeight + 'px';
|
||
|
||
// 动画结束后完全隐藏
|
||
setTimeout(() => {
|
||
this.statusArea.style.maxHeight = '0';
|
||
this.statusArea.style.padding = '0';
|
||
this.statusArea.style.margin = '0';
|
||
this.statusArea.style.overflow = 'hidden';
|
||
|
||
// 再过渡一段时间后完全移除显示
|
||
setTimeout(() => {
|
||
this.statusArea.style.display = 'none';
|
||
}, 500);
|
||
}, 500);
|
||
}
|
||
|
||
clear() {
|
||
if (this.fadeTimeout) {
|
||
clearTimeout(this.fadeTimeout);
|
||
}
|
||
this.contentArea.innerHTML = '';
|
||
this.statusArea.style.opacity = '1';
|
||
this.statusArea.style.transform = 'scale(1)';
|
||
this.statusArea.style.display = 'flex';
|
||
this.statusArea.style.background = 'linear-gradient(135deg, #f6f9fc 0%, #f0f4f8 100%)';
|
||
this.statusArea.style.borderLeft = 'none';
|
||
// 重置历史记录
|
||
this.retrievalHistory = [];
|
||
this.statusHistory = [];
|
||
}
|
||
|
||
destroy() {
|
||
if (this.fadeTimeout) {
|
||
clearTimeout(this.fadeTimeout);
|
||
}
|
||
if (this.statusArea && this.statusArea.parentNode) {
|
||
this.statusArea.parentNode.removeChild(this.statusArea);
|
||
}
|
||
}
|
||
|
||
hexToRgba(hex, alpha) {
|
||
const r = parseInt(hex.slice(1, 3), 16);
|
||
const g = parseInt(hex.slice(3, 5), 16);
|
||
const b = parseInt(hex.slice(5, 7), 16);
|
||
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
|
||
}
|
||
}
|
||
|
||
// 导出
|
||
window.StreamStatusDisplay = StreamStatusDisplay;
|
||
console.log('[StreamStatusDisplay] 组件已加载'); |