fix: 搜索结果放到用户消息下面,折叠显示

- 搜索结果追加到最后一条用户消息的 message-body 中
- 默认折叠,点击展开/收起
- 显示搜索关键词和结果数量
This commit is contained in:
2026-04-13 17:01:08 +08:00
parent c0ed6cd505
commit 3cbdddf773

View File

@@ -86,13 +86,17 @@
.thinking-toggle { font-size: 12px; color: #667eea; } .thinking-toggle { font-size: 12px; color: #667eea; }
.thinking-content { margin-top: 12px; display: none; } .thinking-content { margin-top: 12px; display: none; }
.thinking-content.expanded { display: block; } .thinking-content.expanded { display: block; }
.search-results-box { margin: 8px 0; padding: 12px; background: #f8f9fa; border-radius: 8px; border: 1px solid #e9ecef; } .search-results-box { margin: 12px 0; padding: 10px 12px; background: linear-gradient(135deg, #f0f7ff 0%, #e8f4f8 100%); border-radius: 8px; border: 1px solid #d0e8f0; }
.search-results-box h5 { margin: 0 0 8px; font-size: 14px; color: #495057; } .search-results-header { display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.search-result-item { margin-bottom: 8px; padding: 8px; background: white; border-radius: 6px; } .search-results-header h5 { margin: 0; font-size: 13px; color: #10a37f; display: flex; align-items: center; gap: 6px; }
.search-results-toggle { font-size: 12px; color: #666; }
.search-results-content { margin-top: 10px; display: none; }
.search-results-content.expanded { display: block; }
.search-result-item { margin-bottom: 8px; padding: 8px 10px; background: white; border-radius: 6px; border: 1px solid #eee; }
.search-result-item:last-child { margin-bottom: 0; } .search-result-item:last-child { margin-bottom: 0; }
.search-result-title { font-size: 13px; color: #10a37f; font-weight: 500; margin-bottom: 4px; } .search-result-title { font-size: 13px; color: #10a37f; font-weight: 500; margin-bottom: 4px; }
.search-result-snippet { font-size: 12px; color: #666; line-height: 1.4; } .search-result-snippet { font-size: 12px; color: #666; line-height: 1.4; }
.search-result-url { font-size: 11px; color: #999; margin-top: 4px; } .search-result-url { font-size: 11px; color: #999; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; }
/* Agent信息 */ /* Agent信息 */
.agent-info { font-size: 12px; color: #999; margin-top: 8px; } .agent-info { font-size: 12px; color: #999; margin-top: 8px; }
@@ -635,12 +639,37 @@
if (!results || results.length === 0) return; if (!results || results.length === 0) return;
const container = document.getElementById('messagesContainer'); const container = document.getElementById('messagesContainer');
const div = document.createElement('div');
div.className = 'message assistant';
let html = `<div class="message-avatar">🔍</div><div class="message-body"> // 找到最后一条用户消息
<div class="search-results-box"> const userMessages = container.querySelectorAll('.message.user');
<h5>搜索: ${escapeHtml(query.substring(0, 50))}${query.length > 50 ? '...' : ''}</h5>`; const lastUserMsg = userMessages[userMessages.length - 1];
if (!lastUserMsg) {
// 没有用户消息,作为独立消息显示
const div = document.createElement('div');
div.className = 'message assistant';
div.innerHTML = `<div class="message-avatar">🔍</div><div class="message-body">${buildSearchResultsHtml(results, query)}</div>`;
container.appendChild(div);
} else {
// 在用户消息的 message-body 中追加搜索结果
const msgBody = lastUserMsg.querySelector('.message-body');
if (msgBody) {
msgBody.innerHTML += buildSearchResultsHtml(results, query);
}
}
// 滚动到底部
container.scrollTop = container.scrollHeight;
}
function buildSearchResultsHtml(results, query) {
const resultId = 'sr-' + Date.now();
let html = `<div class="search-results-box">
<div class="search-results-header" onclick="toggleSearchResults('${resultId}')">
<h5><i class="ri-search-line"></i> 搜索: ${escapeHtml(query.substring(0, 30))}${query.length > 30 ? '...' : ''} (${results.length}条结果)</h5>
<span class="search-results-toggle" id="${resultId}-toggle">展开 <i class="ri-arrow-down-s-line"></i></span>
</div>
<div class="search-results-content" id="${resultId}">`;
for (const r of results) { for (const r of results) {
html += `<div class="search-result-item"> html += `<div class="search-result-item">
@@ -651,11 +680,19 @@
} }
html += '</div></div>'; html += '</div></div>';
div.innerHTML = html; return html;
container.appendChild(div); }
// 滚动到底部 function toggleSearchResults(id) {
container.scrollTop = container.scrollHeight; const content = document.getElementById(id);
const toggle = document.getElementById(id + '-toggle');
if (content.classList.contains('expanded')) {
content.classList.remove('expanded');
toggle.innerHTML = '展开 <i class="ri-arrow-down-s-line"></i>';
} else {
content.classList.add('expanded');
toggle.innerHTML = '收起 <i class="ri-arrow-up-s-line"></i>';
}
} }
// 会话管理 // 会话管理