leefer/xiaobaifupan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

BAI-15: group mentor answer bubbles

Browse Source 
Co-authored-by: multica-agent <github@multica.ai>
This commit is contained in:
MS-01-Codex
2026-08-07 16:40:00 +08:00
co-authored by multica-agent
parent 777af0cb8b
commit 228e08a5e2
5 changed files with 88 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/frontend/pages/mentor/foundation.css
Vendored
+25 -59
View File
@@ -250,20 +250,20 @@
align-items: center;
justify-content: center;
border: 1px solid var(--mentor-blue-line);
border-radius: 50%;
border-radius: var(--radius-md);
background: var(--mentor-blue-soft);
color: var(--mentor-blue-dark);
font-size: var(--font-size-card-title);
font-weight: var(--font-weight-semibold);
}
#mentorView .mentor-avatar[data-grade="a"] {
#mentorView :is(.mentor-avatar, .mentor-message-avatar, .mentor-profile-avatar)[data-grade="a"] {
border-color: var(--market-up);
background: var(--market-up-soft);
color: var(--market-up);
}
#mentorView .mentor-avatar[data-grade="c"] {
#mentorView :is(.mentor-avatar, .mentor-message-avatar, .mentor-profile-avatar)[data-grade="c"] {
border-color: var(--market-down);
background: var(--market-down-soft);
color: var(--market-down);
@@ -427,61 +427,10 @@
background: var(--surface-subtle);
}
#mentorView .mentor-chat-header {
height: var(--mentor-pane-header-height);
flex: 0 0 var(--mentor-pane-header-height);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-12);
padding: 0 var(--space-16);
border-bottom: 1px solid var(--mentor-line);
background: var(--surface);
}
#mentorView .mentor-chat-identity {
min-width: 0;
display: flex;
align-items: center;
gap: var(--space-8);
}
#mentorView .mentor-chat-identity > div {
min-width: 0;
}
#mentorView .mentor-active-title {
min-width: 0;
display: flex;
align-items: center;
gap: var(--space-8);
}
#mentorView .mentor-active-title h3 {
min-width: 0;
margin: 0;
overflow: hidden;
color: var(--mentor-ink);
font-size: var(--font-size-card-title);
font-weight: var(--font-weight-semibold);
letter-spacing: 0;
text-overflow: ellipsis;
white-space: nowrap;
}
#mentorView .mentor-active-badges {
display: inline-flex;
gap: var(--space-4);
}
#mentorView #activeMentorStatus {
margin: var(--space-4) 0 0;
color: var(--mentor-faint);
font-size: var(--font-size-caption);
}
#mentorView .mentor-clear-button {
flex: 0 0 auto;
width: 40px;
height: 40px;
flex: 0 0 40px;
color: var(--mentor-sub);
}
@@ -554,7 +503,7 @@
align-items: center;
justify-content: center;
border: 1px solid var(--mentor-line);
border-radius: 50%;
border-radius: var(--radius-md);
background: var(--surface);
color: var(--mentor-sub);
font-size: var(--font-size-label);
@@ -568,6 +517,7 @@
}
#mentorView .mentor-message-body {
min-width: 0;
max-width: var(--mentor-message-max-width);
display: flex;
flex-direction: column;
@@ -579,6 +529,20 @@
align-items: flex-end;
}
#mentorView .mentor-message-stack {
min-width: 0;
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-8);
}
#mentorView .mentor-message-stack > .mentor-message-content {
width: fit-content;
max-width: 100%;
}
#mentorView .mentor-message-label {
color: var(--mentor-faint);
font-size: var(--font-size-caption);
@@ -618,6 +582,7 @@
#mentorView .mentor-answer-paragraph {
margin: 0 0 var(--space-8);
text-wrap: pretty;
}
#mentorView .mentor-answer-paragraph:last-child {
@@ -630,6 +595,7 @@
color: var(--mentor-ink);
font-size: var(--font-size-body);
font-weight: var(--font-weight-semibold);
text-wrap: balance;
}
#mentorView .mentor-answer-heading:first-child {
@@ -844,7 +810,7 @@
align-items: center;
justify-content: center;
border: 1px solid var(--mentor-blue-line);
border-radius: 50%;
border-radius: var(--radius-md);
background: var(--mentor-blue-soft);
color: var(--mentor-blue-dark);
font-size: var(--font-size-metric);
app/frontend/pages/mentor/page.html
+2 -10
View File
@@ -33,16 +33,7 @@
</aside>
<section class="mentor-chat-panel" aria-label="问师对话">
<header class="mentor-chat-header">
<div class="mentor-chat-identity">
<span id="activeMentorAvatar" class="mentor-avatar" aria-hidden="true">师</span>
<div>
<div class="mentor-active-title"><h3 id="activeMentorName">--</h3><span id="activeMentorBadges" class="mentor-active-badges"></span></div>
<p id="activeMentorStatus">思维模型已就绪</p>
</div>
</div>
<button id="clearMentorChatButton" class="icon-button mentor-clear-button" type="button" disabled aria-label="清空当前对话" title="清空对话"><i data-lucide="trash-2"></i></button>
</header>
<p id="activeMentorStatus" class="visually-hidden" aria-live="polite">思维模型已就绪</p>
<div id="mentorMessages" class="mentor-messages" aria-live="polite"></div>
<div id="mentorQuickPrompts" class="mentor-quick-prompts">
<span class="mentor-prompt-label">开始一个话题</span>
@@ -56,6 +47,7 @@
<textarea id="mentorQuestion" maxlength="2000" placeholder="输入市场、板块、个股代码或交易问题"></textarea>
<div class="mentor-composer-actions">
<span>Enter 发送 · Shift + Enter 换行</span>
<button id="clearMentorChatButton" class="icon-button mentor-clear-button" type="button" disabled aria-label="清空当前对话" title="清空对话"><i data-lucide="trash-2"></i></button>
<button id="stopMentorQuestion" class="button ghost mentor-stop-button" type="button" hidden><i data-lucide="square"></i><span>停止</span></button>
<button id="sendMentorQuestion" class="button primary mentor-send-button" type="submit"><i data-lucide="send-horizontal"></i><span>发送</span></button>
</div>
app/frontend/pages/mentor/page.js
+38 -15
View File
@@ -36,14 +36,12 @@ function renderMentorWorkspace() {
if (!setup) return;
const selected = setup.mentors.find((item) => item.id === state.selectedMentorId) || null;
setText("mentorDataDate", `数据日期 ${displayCompactDate(setup.trade_date)}`);
setText("activeMentorName", selected?.name || "--");
setText("mentorProfileName", selected?.name || "--");
setText("mentorProfileTagline", selected?.tagline || selected?.description || "--");
setText("mentorProfileSource", selected?.evidence?.label || "公开资料整理");
setText("mentorProfileDataDate", `行情数据 ${displayCompactDate(setup.trade_date)}`);
setText("activeMentorAvatar", mentorAvatarText(selected));
setText("mentorProfileAvatar", mentorAvatarText(selected));
document.querySelector("#activeMentorBadges").innerHTML = selected ? renderMentorBadges(selected, true) : "";
document.querySelector("#mentorProfileAvatar").dataset.grade = String(selected?.evidence?.grade || "").toLowerCase();
document.querySelector("#mentorProfileBadges").innerHTML = selected ? renderMentorBadges(selected, true) : "";
setText("activeMentorEvidence", selected?.evidence?.note || selected?.description || "--");
document.querySelector("#activeMentorFocus").innerHTML = (selected?.focus || []).slice(0, 4)
@@ -287,12 +285,14 @@ function renderMentorMessages() {
} else {
container.innerHTML = state.mentorMessages.map((message) => `
<article class="mentor-message ${message.role} ${message.error ? "is-error" : ""}">
<span class="mentor-message-avatar" aria-hidden="true">${message.role === "user" ? "我" : escapeHtml(mentorAvatarText(selected))}</span>
<span class="mentor-message-avatar" data-grade="${message.role === "assistant" ? escapeHtml(String(selected?.evidence?.grade || "").toLowerCase()) : ""}" aria-hidden="true">${message.role === "user" ? "我" : escapeHtml(mentorAvatarText(selected))}</span>
<div class="mentor-message-body">
<div class="mentor-message-label">${message.role === "user" ? "我" : escapeHtml(selected?.name || "问师")}</div>
<div class="mentor-message-content">${message.role === "assistant"
? (message.content ? formatMentorAnswer(message.content) : '<p class="mentor-loading-copy">正在读取复盘数据并推演...</p>')
: escapeHtml(message.content)}</div>
${message.role === "assistant"
? `<div class="mentor-message-stack">${message.content
? formatMentorAnswer(message.content)
: '<div class="mentor-message-content"><p class="mentor-loading-copy">正在读取复盘数据并推演...</p></div>'}</div>`
: `<div class="mentor-message-content">${escapeHtml(message.content)}</div>`}
${message.streaming ? '<span class="assistant-stream-caret" aria-hidden="true"></span>' : ""}
${renderMentorFollowUps(message)}
${message.meta && !message.streaming ? `<small>${escapeHtml(message.meta)}</small>` : ""}
@@ -478,12 +478,14 @@ function hideMentorNotice() {
}
function formatMentorAnswer(content) {
const blocks = [];
const sections = [[]];
let currentSection = sections[0];
let headingCount = 0;
let listType = "";
let listItems = [];
const flushList = () => {
if (!listItems.length) return;
blocks.push(`<${listType} class="mentor-answer-list">${listItems.map((item) => `<li>${item}</li>`).join("")}</${listType}>`);
currentSection.push(`<${listType} class="mentor-answer-list">${listItems.map((item) => `<li>${item}</li>`).join("")}</${listType}>`);
listItems = [];
listType = "";
};
@@ -493,18 +495,23 @@ function formatMentorAnswer(content) {
flushList();
return;
}
const heading = line.match(/^#{1,3}\s+(.+)$/);
const heading = mentorAnswerHeading(line);
const bullet = line.match(/^[-*]\s+(.+)$/);
const ordered = line.match(/^\d+[.、]\s*(.+)$/);
if (heading) {
flushList();
blocks.push(`<strong class="mentor-answer-heading">${formatMentorInline(escapeHtml(heading[1]))}</strong>`);
if (currentSection.length) {
currentSection = [];
sections.push(currentSection);
}
headingCount += 1;
currentSection.push(`<strong class="mentor-answer-heading">${formatMentorInline(escapeHtml(heading))}</strong>`);
} else if (/^-{3,}$/.test(line)) {
flushList();
blocks.push('<span class="mentor-answer-rule"></span>');
currentSection.push('<span class="mentor-answer-rule"></span>');
} else if (line.startsWith("> ")) {
flushList();
blocks.push(`<span class="mentor-answer-quote">${formatMentorInline(escapeHtml(line.slice(2)))}</span>`);
currentSection.push(`<span class="mentor-answer-quote">${formatMentorInline(escapeHtml(line.slice(2)))}</span>`);
} else if (bullet || ordered) {
const nextType = bullet ? "ul" : "ol";
if (listType && listType !== nextType) flushList();
@@ -512,11 +519,27 @@ function formatMentorAnswer(content) {
listItems.push(formatMentorInline(escapeHtml((bullet || ordered)[1])));
} else {
flushList();
blocks.push(`<p class="mentor-answer-paragraph">${formatMentorInline(escapeHtml(line))}</p>`);
currentSection.push(`<p class="mentor-answer-paragraph">${formatMentorInline(escapeHtml(line))}</p>`);
}
});
flushList();
return blocks.join("");
const populatedSections = sections.filter((section) => section.length);
if (headingCount < 2) {
return `<div class="mentor-message-content">${populatedSections.flat().join("")}</div>`;
}
return populatedSections.map((section) => (
`<section class="mentor-message-content mentor-answer-bubble">${section.join("")}</section>`
)).join("");
}
function mentorAnswerHeading(line) {
const markdownHeading = line.match(/^#{1,3}\s+(.+)$/);
if (markdownHeading) return markdownHeading[1].trim();
const boldHeading = line.match(/^\*\*([^*]+)\*\*$/);
if (!boldHeading) return "";
const title = boldHeading[1].trim();
if (!title || title.length > 32 || /[。！？!?；;：:]$/.test(title)) return "";
return title;
}
function formatMentorInline(content) {