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; align-items: center;
justify-content: center; justify-content: center;
border: 1px solid var(--mentor-blue-line); border: 1px solid var(--mentor-blue-line);
border-radius: 50%; border-radius: var(--radius-md);
background: var(--mentor-blue-soft); background: var(--mentor-blue-soft);
color: var(--mentor-blue-dark); color: var(--mentor-blue-dark);
font-size: var(--font-size-card-title); font-size: var(--font-size-card-title);
font-weight: var(--font-weight-semibold); 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); border-color: var(--market-up);
background: var(--market-up-soft); background: var(--market-up-soft);
color: var(--market-up); 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); border-color: var(--market-down);
background: var(--market-down-soft); background: var(--market-down-soft);
color: var(--market-down); color: var(--market-down);
@@ -427,61 +427,10 @@
background: var(--surface-subtle); 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 { #mentorView .mentor-clear-button {
flex: 0 0 auto; width: 40px;
height: 40px;
flex: 0 0 40px;
color: var(--mentor-sub); color: var(--mentor-sub);
} }
@@ -554,7 +503,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: 1px solid var(--mentor-line); border: 1px solid var(--mentor-line);
border-radius: 50%; border-radius: var(--radius-md);
background: var(--surface); background: var(--surface);
color: var(--mentor-sub); color: var(--mentor-sub);
font-size: var(--font-size-label); font-size: var(--font-size-label);
@@ -568,6 +517,7 @@
} }
#mentorView .mentor-message-body { #mentorView .mentor-message-body {
min-width: 0;
max-width: var(--mentor-message-max-width); max-width: var(--mentor-message-max-width);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -579,6 +529,20 @@
align-items: flex-end; 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 { #mentorView .mentor-message-label {
color: var(--mentor-faint); color: var(--mentor-faint);
font-size: var(--font-size-caption); font-size: var(--font-size-caption);
@@ -618,6 +582,7 @@
#mentorView .mentor-answer-paragraph { #mentorView .mentor-answer-paragraph {
margin: 0 0 var(--space-8); margin: 0 0 var(--space-8);
text-wrap: pretty;
} }
#mentorView .mentor-answer-paragraph:last-child { #mentorView .mentor-answer-paragraph:last-child {
@@ -630,6 +595,7 @@
color: var(--mentor-ink); color: var(--mentor-ink);
font-size: var(--font-size-body); font-size: var(--font-size-body);
font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold);
text-wrap: balance;
} }
#mentorView .mentor-answer-heading:first-child { #mentorView .mentor-answer-heading:first-child {
@@ -844,7 +810,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: 1px solid var(--mentor-blue-line); border: 1px solid var(--mentor-blue-line);
border-radius: 50%; border-radius: var(--radius-md);
background: var(--mentor-blue-soft); background: var(--mentor-blue-soft);
color: var(--mentor-blue-dark); color: var(--mentor-blue-dark);
font-size: var(--font-size-metric); font-size: var(--font-size-metric);
app/frontend/pages/mentor/page.html
+2 -10
View File
@@ -33,16 +33,7 @@
</aside> </aside>
<section class="mentor-chat-panel" aria-label="问师对话"> <section class="mentor-chat-panel" aria-label="问师对话">
<header class="mentor-chat-header"> <p id="activeMentorStatus" class="visually-hidden" aria-live="polite">思维模型已就绪</p>
<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>
<div id="mentorMessages" class="mentor-messages" aria-live="polite"></div> <div id="mentorMessages" class="mentor-messages" aria-live="polite"></div>
<div id="mentorQuickPrompts" class="mentor-quick-prompts"> <div id="mentorQuickPrompts" class="mentor-quick-prompts">
<span class="mentor-prompt-label">开始一个话题</span> <span class="mentor-prompt-label">开始一个话题</span>
@@ -56,6 +47,7 @@
<textarea id="mentorQuestion" maxlength="2000" placeholder="输入市场、板块、个股代码或交易问题"></textarea> <textarea id="mentorQuestion" maxlength="2000" placeholder="输入市场、板块、个股代码或交易问题"></textarea>
<div class="mentor-composer-actions"> <div class="mentor-composer-actions">
<span>Enter 发送 · Shift + Enter 换行</span> <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="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> <button id="sendMentorQuestion" class="button primary mentor-send-button" type="submit"><i data-lucide="send-horizontal"></i><span>发送</span></button>
</div> </div>
app/frontend/pages/mentor/page.js
+38 -15
View File
@@ -36,14 +36,12 @@ function renderMentorWorkspace() {
if (!setup) return; if (!setup) return;
const selected = setup.mentors.find((item) => item.id === state.selectedMentorId) || null; const selected = setup.mentors.find((item) => item.id === state.selectedMentorId) || null;
setText("mentorDataDate", `数据日期 ${displayCompactDate(setup.trade_date)}`); setText("mentorDataDate", `数据日期 ${displayCompactDate(setup.trade_date)}`);
setText("activeMentorName", selected?.name || "--");
setText("mentorProfileName", selected?.name || "--"); setText("mentorProfileName", selected?.name || "--");
setText("mentorProfileTagline", selected?.tagline || selected?.description || "--"); setText("mentorProfileTagline", selected?.tagline || selected?.description || "--");
setText("mentorProfileSource", selected?.evidence?.label || "公开资料整理"); setText("mentorProfileSource", selected?.evidence?.label || "公开资料整理");
setText("mentorProfileDataDate", `行情数据 ${displayCompactDate(setup.trade_date)}`); setText("mentorProfileDataDate", `行情数据 ${displayCompactDate(setup.trade_date)}`);
setText("activeMentorAvatar", mentorAvatarText(selected));
setText("mentorProfileAvatar", 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) : ""; document.querySelector("#mentorProfileBadges").innerHTML = selected ? renderMentorBadges(selected, true) : "";
setText("activeMentorEvidence", selected?.evidence?.note || selected?.description || "--"); setText("activeMentorEvidence", selected?.evidence?.note || selected?.description || "--");
document.querySelector("#activeMentorFocus").innerHTML = (selected?.focus || []).slice(0, 4) document.querySelector("#activeMentorFocus").innerHTML = (selected?.focus || []).slice(0, 4)
@@ -287,12 +285,14 @@ function renderMentorMessages() {
} else { } else {
container.innerHTML = state.mentorMessages.map((message) => ` container.innerHTML = state.mentorMessages.map((message) => `
<article class="mentor-message ${message.role} ${message.error ? "is-error" : ""}"> <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-body">
<div class="mentor-message-label">${message.role === "user" ? "我" : escapeHtml(selected?.name || "问师")}</div> <div class="mentor-message-label">${message.role === "user" ? "我" : escapeHtml(selected?.name || "问师")}</div>
<div class="mentor-message-content">${message.role === "assistant" ${message.role === "assistant"
? (message.content ? formatMentorAnswer(message.content) : '<p class="mentor-loading-copy">正在读取复盘数据并推演...</p>') ? `<div class="mentor-message-stack">${message.content
: escapeHtml(message.content)}</div> ? 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>' : ""} ${message.streaming ? '<span class="assistant-stream-caret" aria-hidden="true"></span>' : ""}
${renderMentorFollowUps(message)} ${renderMentorFollowUps(message)}
${message.meta && !message.streaming ? `<small>${escapeHtml(message.meta)}</small>` : ""} ${message.meta && !message.streaming ? `<small>${escapeHtml(message.meta)}</small>` : ""}
@@ -478,12 +478,14 @@ function hideMentorNotice() {
} }
function formatMentorAnswer(content) { function formatMentorAnswer(content) {
const blocks = []; const sections = [[]];
let currentSection = sections[0];
let headingCount = 0;
let listType = ""; let listType = "";
let listItems = []; let listItems = [];
const flushList = () => { const flushList = () => {
if (!listItems.length) return; 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 = []; listItems = [];
listType = ""; listType = "";
}; };
@@ -493,18 +495,23 @@ function formatMentorAnswer(content) {
flushList(); flushList();
return; return;
} }
const heading = line.match(/^#{1,3}\s+(.+)$/); const heading = mentorAnswerHeading(line);
const bullet = line.match(/^[-*]\s+(.+)$/); const bullet = line.match(/^[-*]\s+(.+)$/);
const ordered = line.match(/^\d+[.、]\s*(.+)$/); const ordered = line.match(/^\d+[.、]\s*(.+)$/);
if (heading) { if (heading) {
flushList(); 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)) { } else if (/^-{3,}$/.test(line)) {
flushList(); flushList();
blocks.push('<span class="mentor-answer-rule"></span>'); currentSection.push('<span class="mentor-answer-rule"></span>');
} else if (line.startsWith("> ")) { } else if (line.startsWith("> ")) {
flushList(); 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) { } else if (bullet || ordered) {
const nextType = bullet ? "ul" : "ol"; const nextType = bullet ? "ul" : "ol";
if (listType && listType !== nextType) flushList(); if (listType && listType !== nextType) flushList();
@@ -512,11 +519,27 @@ function formatMentorAnswer(content) {
listItems.push(formatMentorInline(escapeHtml((bullet || ordered)[1]))); listItems.push(formatMentorInline(escapeHtml((bullet || ordered)[1])));
} else { } else {
flushList(); flushList();
blocks.push(`<p class="mentor-answer-paragraph">${formatMentorInline(escapeHtml(line))}</p>`); currentSection.push(`<p class="mentor-answer-paragraph">${formatMentorInline(escapeHtml(line))}</p>`);
} }
}); });
flushList(); 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) { function formatMentorInline(content) {
app/frontend/shared/tokens.css
+2 -2
View File
@@ -222,8 +222,8 @@
--mentor-directory-width: 280px; --mentor-directory-width: 280px;
--mentor-profile-width: 272px; --mentor-profile-width: 272px;
--mentor-pane-header-height: 58px; --mentor-pane-header-height: 58px;
--mentor-avatar-size: 38px; --mentor-avatar-size: 46px;
--mentor-profile-avatar-size: 68px; --mentor-profile-avatar-size: 80px;
--mentor-composer-min-height: 94px; --mentor-composer-min-height: 94px;
--mentor-message-max-width: 82%; --mentor-message-max-width: 82%;
app/tests/e2e/app-shell.spec.js
+21 -4
View File
@@ -489,8 +489,8 @@ async function mockApplication(page, authSession = session(), options = {}) {
status: 200, status: 200,
contentType: "application/x-ndjson; charset=utf-8", contentType: "application/x-ndjson; charset=utf-8",
body: [ body: [
JSON.stringify({ type: "delta", content: "## 判断\n先看市场结构。\n\n" }), JSON.stringify({ type: "delta", content: "**判断**\n先看市场结构。\n\n" }),
JSON.stringify({ type: "delta", content: "- 等待确认\n- 控制仓位" }), JSON.stringify({ type: "delta", content: "**操作**\n- 等待确认\n- 控制仓位" }),
JSON.stringify({ JSON.stringify({
type: "meta", type: "meta",
data_trade_date: "20260722", data_trade_date: "20260722",
@@ -2818,9 +2818,24 @@ test("mentor directory exposes evidence filters and private owner metadata", asy
await page.locator('[data-mentor-grade="B"]').click(); await page.locator('[data-mentor-grade="B"]').click();
await expect(page.locator("#mentorList .mentor-option")).toHaveCount(7); await expect(page.locator("#mentorList .mentor-option")).toHaveCount(7);
await page.locator('#mentorList [data-mentor-id="source-b"]').click(); await page.locator('#mentorList [data-mentor-id="source-b"]').click();
await expect(page.locator("#activeMentorName")).toHaveText("多源老师"); await expect(page.locator("#mentorProfileName")).toHaveText("多源老师");
await expect(page.locator("#activeMentorBadges")).toHaveText("B"); await expect(page.locator("#mentorProfileBadges")).toHaveText("B");
await expect(page.locator("#activeMentorEvidence")).toHaveText("公开访谈与多源材料"); await expect(page.locator("#activeMentorEvidence")).toHaveText("公开访谈与多源材料");
await expect(page.locator("#mentorView .mentor-chat-header")).toHaveCount(0);
await expect(page.locator("#mentorChatForm #clearMentorChatButton")).toBeVisible();
const avatarGeometry = await page.evaluate(() => {
const directoryAvatar = document.querySelector("#mentorList .mentor-option.active .mentor-avatar");
const profileAvatar = document.querySelector("#mentorProfileAvatar");
return {
directoryWidth: directoryAvatar.getBoundingClientRect().width,
directoryRadius: getComputedStyle(directoryAvatar).borderRadius,
profileWidth: profileAvatar.getBoundingClientRect().width,
profileRadius: getComputedStyle(profileAvatar).borderRadius,
};
});
expect(avatarGeometry.directoryWidth).toBeGreaterThanOrEqual(46);
expect(avatarGeometry.profileWidth).toBeGreaterThan(avatarGeometry.directoryWidth);
expect(avatarGeometry.profileRadius).toBe(avatarGeometry.directoryRadius);
const mentorLibrary = await page.locator("#mentorView .mentor-sidebar").boundingBox(); const mentorLibrary = await page.locator("#mentorView .mentor-sidebar").boundingBox();
const mentorChat = await page.locator("#mentorView .mentor-chat-panel").boundingBox(); const mentorChat = await page.locator("#mentorView .mentor-chat-panel").boundingBox();
const mentorProfile = await page.locator("#mentorView .mentor-profile-panel").boundingBox(); const mentorProfile = await page.locator("#mentorView .mentor-profile-panel").boundingBox();
@@ -2864,6 +2879,8 @@ test("mentor pins, custom order and streamed replies work together", async ({ pa
await page.locator("#sendMentorQuestion").click(); await page.locator("#sendMentorQuestion").click();
const answer = page.locator("#mentorMessages .mentor-message.assistant").last(); const answer = page.locator("#mentorMessages .mentor-message.assistant").last();
await expect(answer).toContainText("先看市场结构。"); await expect(answer).toContainText("先看市场结构。");
await expect(answer.locator(".mentor-message-content")).toHaveCount(2);
await expect(answer.locator(".mentor-answer-heading")).toHaveCount(2);
await expect(answer.locator(".mentor-answer-list li")).toHaveCount(2); await expect(answer.locator(".mentor-answer-list li")).toHaveCount(2);
await expect(answer.locator("br")).toHaveCount(0); await expect(answer.locator("br")).toHaveCount(0);
await expect(page.locator("#mentorMessages .assistant-stream-caret")).toHaveCount(0); await expect(page.locator("#mentorMessages .assistant-stream-caret")).toHaveCount(0);