fix: 搜索结果放到用户消息下面,折叠显示
- 搜索结果追加到最后一条用户消息的 message-body 中 - 默认折叠,点击展开/收起 - 显示搜索关键词和结果数量
This commit is contained in:
@@ -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>';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 会话管理
|
// 会话管理
|
||||||
|
|||||||
Reference in New Issue
Block a user