wangxuming/makelore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(chat): show playful teacher introductions on hover

Browse Source
This commit is contained in:
鲨鱼辣椒
2026-09-28 12:12:10 +08:00
parent b26e25c9ed
commit 772da4f8e4
16 changed files with 433 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
tests/e2e/fixtures/teacher-preview-layout.tsx
View File

@@ -9,7 +9,8 @@ import '../../../src/pages/Chat/classroom-workspace.css';
// window is launched, and no user project, provider, or live Host API is used.
export function Layout() {
const [bubble, setBubble] = useState<HTMLDivElement | null>(null);
const [visible, setVisible] = useState(true);
const [introduction, setIntroduction] = useState<HTMLDivElement | null>(null);
const [visible, setVisible] = useState(!new URLSearchParams(location.search).has('quiet'));
const [open, setOpen] = useState(false);
const [width, setWidth] = useState(508);
const [long, setLong] = useState(true);
@@ -18,6 +19,7 @@ export function Layout() {
const agents = Array.from({ length: count }, (_, index) => ({
teacher_id: `agent-${index}`, version: index + 1, is_default: index === 0,
definition: { config_id: `agent-${index}`, name: `智能体${index + 1}`, avatar_id: 'avatar-06',
description: `我是智能体${index + 1}，陪你把脑洞变成小作品。一起发现有趣的问题，也一起想清楚下一步怎么做。`,
icon_url: new URLSearchParams(location.search).has('icons') ? `https://yuxi.example.test/api/storage/public/images/agent-${index}.png` : undefined },
}));
const companion = {
@@ -30,14 +32,17 @@ export function Layout() {
return <div className="classroom-workspace flex h-screen flex-col bg-white">
<header className="relative z-50 flex h-10 shrink-0 items-center justify-end border-b px-3" data-testid="coding-conversation-header">
<span className="mr-auto min-w-0 truncate text-xs">布局测试项目 › hello</span>
<TeacherCompanion companion={companion} open={open} onOpen={(id) => { if (id) setSelected(agents.findIndex((item) => item.teacher_id === id)); setOpen(!open); }} bubbleRef={setBubble} />
<TeacherCompanion companion={companion} open={open}
onOpen={(id) => { if (id) setSelected(agents.findIndex((item) => item.teacher_id === id)); setOpen(true); }}
onToggle={(id) => { if (!id || id === agents[selected]?.teacher_id) setOpen(!open); else { setSelected(agents.findIndex((item) => item.teacher_id === id)); setOpen(true); } }}
bubbleRef={setBubble} introductionRef={setIntroduction} />
<span data-testid="window-controls" className="w-[132px] shrink-0 text-center text-xs">— □ ×</span>
</header>
<div className="relative flex min-h-0 flex-1" data-testid="coding-chat-panel" data-consultation-open={open}>
<main className="flex min-w-0 flex-1 flex-col">
<div className="classroom-tabs" role="tablist"><button role="tab">操作对话</button><button role="tab" aria-selected="true">作品</button></div>
<div className="classroom-work-view flex min-h-0 flex-1 flex-col p-5" data-testid="work-view">
<AgentBrowserPanel projectId="layout-fixture" embedded open teacherBubble={bubble} onOpenChange={() => {}} />
<AgentBrowserPanel projectId="layout-fixture" embedded open teacherBubble={bubble} teacherIntroduction={introduction} onOpenChange={() => {}} />
</div>
</main>
{open && <aside id="coding-consultation-dock" className="classroom-consultation-dock consultation-pane shrink-0 border-l p-5" style={{ width }}>

54
tests/e2e/pi-coding-first-chat.spec.ts
View File

@@ -454,10 +454,10 @@ async function installCodingFirstChatHost(
...overrides,
});
const teacherDefinition = {schema_version:1,teacher_id:'coding-teacher',name:'代码智能体',description:'',avatar_id:'avatar-01',welcome_message:'一起理解代码',suggested_questions:['解释当前代码'],system_prompt:'教学',skills:[],model:{model_id:'model-a',reasoning_choice:{mode:'default'}},limits:{max_input_tokens:8000,max_output_tokens:1500}};
const teacherDefinition = {schema_version:1,teacher_id:'coding-teacher',name:'代码智能体',description:'一起发现代码里的小奥秘，把想法变成作品。',avatar_id:'avatar-01',welcome_message:'一起理解代码',suggested_questions:['解释当前代码'],system_prompt:'教学',skills:[],model:{model_id:'model-a',reasoning_choice:{mode:'default'}},limits:{max_input_tokens:8000,max_output_tokens:1500}};
const teachers = [
{ teacher_id: 'teacher-code', version: 1, is_default: true, definition: { ...teacherDefinition, config_id: 'teacher-code', runtime: 'yuxi', system_prompt: '', yuxi: { agent_slug: 'code', agent_version: 2 } } },
{ teacher_id: 'teacher-algorithm', version: 9, is_default: false, definition: { ...teacherDefinition, config_id: 'teacher-algorithm', runtime: 'yuxi', name: '朋友', system_prompt: '', yuxi: { agent_slug: 'algorithm', agent_version: 4 } } },
{ teacher_id: 'teacher-algorithm', version: 9, is_default: false, definition: { ...teacherDefinition, config_id: 'teacher-algorithm', runtime: 'yuxi', name: '朋友', description: '陪你听听玩家的想法，让作品更有趣。', system_prompt: '', yuxi: { agent_slug: 'algorithm', agent_version: 4 } } },
];
const consultationTopics: Record<string, Record<string, unknown>> = {};
ipcMain.removeHandler('hostapi:fetch');
@@ -1786,8 +1786,18 @@ test('project consultations preserve student drafts and switch between work and
await expect(composer).toBeHidden();
await page.getByRole('tab',{name:'操作对话',exact:true}).click();
await expect(composer).toHaveValue('保留我的草稿');
await page.getByRole('button',{name:'与代码智能体聊天',exact:true}).hover();
await expect(page.getByTestId('teacher-introduction')).toContainText('一起发现代码里的小奥秘，把想法变成作品。');
await page.getByRole('button',{name:'与朋友聊天',exact:true}).hover();
await expect(page.getByTestId('teacher-introduction')).toHaveCount(1);
await expect(page.getByTestId('teacher-introduction')).toContainText('陪你听听玩家的想法，让作品更有趣。');
await expect(page.getByTestId('teacher-chat-panel')).toHaveCount(0);
expect((await readState(electronApp)).captured.filter(item => /\/(messages|teacher-check-in)$/.test(item.path) && item.method === 'POST')).toHaveLength(0);
await page.getByRole('button',{name:'与朋友聊天',exact:true}).click();
const teacher=page.getByTestId('teacher-chat-panel');
await expect(page.getByTestId('teacher-introduction')).toHaveCount(0);
await expect(teacher.locator('header').getByRole('button')).toHaveCount(0);
await expect(teacher.getByText('陪你听听玩家的想法，让作品更有趣。')).toHaveCount(0);
await expect(page.getByRole('tab',{name:'作品',exact:true})).toHaveAttribute('aria-selected','true');
await expect(page.getByRole('tabpanel',{name:'作品',exact:true})).toBeVisible();
await expect(composer).toBeHidden();
@@ -1819,7 +1829,9 @@ test('project consultations preserve student drafts and switch between work and
await expect(teacher.getByRole('textbox',{name:'向智能体提问'})).toHaveValue('还没说完的困惑');
await page.getByRole('tab',{name:'操作对话',exact:true}).click();
await expect(composer).toBeVisible();
await teacher.getByRole('button',{name:'关闭智能体'}).click();
await page.getByRole('button',{name:'与朋友聊天',exact:true}).click();
await expect(teacher).toHaveCount(0);
await expect(page.getByRole('button',{name:'与朋友聊天',exact:true})).toBeFocused();
await page.getByRole('button', { name: '与代码智能体聊天' }).click();
await expect(teacher.getByRole('heading', { name: '代码智能体' })).toBeVisible();
await expect(teacher.getByRole('textbox', { name: '向智能体提问' })).toHaveValue('');
@@ -1827,6 +1839,11 @@ test('project consultations preserve student drafts and switch between work and
await page.getByRole('button',{name:'与朋友聊天',exact:true}).click();
await expect(teacher.getByRole('textbox',{name:'向智能体提问'})).toHaveValue('还没说完的困惑');
await expect(teacher.getByText('先理解状态如何随点击变化，再修改代码。')).toBeVisible();
// Moving inside the clicked entry must not schedule its introduction again.
const friendEntry = (await page.getByRole('button', { name: '与朋友聊天', exact: true }).boundingBox())!;
await page.mouse.move(friendEntry.x + friendEntry.width / 2 + 2, friendEntry.y + friendEntry.height / 2);
await page.waitForTimeout(300);
await expect(page.getByTestId('teacher-introduction')).toHaveCount(0);
const requests=(await readState(electronApp)).captured;
expect(requests.filter(item=>item.path.endsWith('/prompt')&&item.method==='POST')).toHaveLength(0);
const consultationRequests=requests.filter(item=>item.path.endsWith('/messages')&&item.method==='POST');
@@ -1838,7 +1855,7 @@ test('project consultations preserve student drafts and switch between work and
expect(consultationRequests[1].body?.intent).toBeUndefined();
expect(consultationRequests[2].body).toMatchObject({intent:'guided-help',text:'我也说不清，你带我看看'});
await page.screenshot({path:test.info().outputPath('project-teacher-side-chat.png')});
await teacher.getByRole('button',{name:'关闭智能体'}).click();await expect(teacher).toHaveCount(0);
await page.getByRole('button',{name:'与朋友聊天',exact:true}).click();await expect(teacher).toHaveCount(0);
await page.getByRole('button',{name:'与朋友聊天',exact:true}).click();
await expect(page.getByText('先理解状态如何随点击变化，再修改代码。',{exact:true})).toBeVisible();
await expect(teacher.getByRole('textbox',{name:'向智能体提问'})).toHaveValue('还没说完的困惑');
@@ -1900,9 +1917,9 @@ test('teacher stays in the top-right header and proactively checks in without ta
await page.reload(); page = await getStableWindow(electronApp);
await page.getByTestId('ai-module-option-programming').click();
await page.evaluate(() => { window.location.hash = '/chat'; });
const header = page.getByTestId('coding-conversation-header');
const companion = header.getByTestId('teacher-companion');
const teacherButton = companion.getByRole('button', { name: '智能体', exact: true });
const header = page.getByTestId('coding-conversation-header-titlebar');
const companion = page.getByTestId('teacher-companion');
const teacherButton = companion.getByRole('button', { name: '与代码智能体聊天', exact: true });
await expect(teacherButton).toHaveText('代码智能体');
await expect(teacherButton).toBeVisible();
await expect(teacherButton.locator('img')).toHaveAttribute('src', /avatar-01/);
@@ -1926,6 +1943,22 @@ test('teacher stays in the top-right header and proactively checks in without ta
await composer.fill('我还在写自己的想法');
await page.getByRole('tab', { name: '作品', exact: true }).click();
await expect(teacherButton).toBeVisible();
await teacherButton.hover();
await page.clock.runFor(250);
const introduction = page.getByTestId('teacher-introduction');
await expect(introduction).toContainText('一起发现代码里的小奥秘，把想法变成作品。');
await expect(introduction).toBeInViewport({ ratio: 1 });
const [introductionBounds, introductionViewportBounds] = await Promise.all([
introduction.boundingBox(), page.getByTestId('agent-browser-viewport').boundingBox(),
]);
// Native WebContentsView must leave room for the portaled introduction too.
expect(introductionBounds).not.toBeNull();
expect(introductionViewportBounds).not.toBeNull();
expect(introductionViewportBounds!.y).toBeGreaterThanOrEqual(introductionBounds!.y + introductionBounds!.height);
await page.keyboard.press('Escape');
await expect(introduction).toHaveCount(0);
await expect(invitation).toHaveAttribute('data-bubble-kind', 'welcome');
expect((await readState(electronApp)).captured.filter(item => /\/(messages|teacher-check-in)$/.test(item.path) && item.method === 'POST')).toHaveLength(0);
await page.getByRole('tab', { name: '操作对话', exact: true }).click();
await composer.focus();
await page.clock.fastForward(300_000);
@@ -1977,9 +2010,10 @@ test('teacher stays in the top-right header and proactively checks in without ta
const teacherInput = teacher.getByRole('textbox', { name: '向智能体提问' });
await expect(teacherInput).toBeFocused();
await teacherInput.fill('我想比谁更了解自己的宠物');
await teacher.getByRole('button', { name: '关闭智能体' }).click();
await expect(page.getByRole('button', { name: '智能体', exact: true })).toBeFocused();
await page.getByRole('button', { name: '智能体', exact: true }).click();
await teacherInput.press('Escape');
await expect(teacher).toHaveCount(0);
await expect(teacherButton).toBeFocused();
await teacherButton.click();
await expect(teacherInput).toHaveValue('我想比谁更了解自己的宠物');
await teacherInput.fill('');
// Let the cleared draft propagate through the parent before advancing the check-in timer.

70
tests/e2e/teacher-preview-layout.spec.ts
View File

@@ -70,6 +70,76 @@ async function geometry(page: Page) {
});
}
for (const width of [520, 1000]) {
test(`teacher introduction floats outside the scrolling strip and clears the work at ${width}px`, async ({ page }) => {
await page.setViewportSize({ width, height: 800 });
await page.goto(`${baseUrl}?agents=8&quiet=1`);
const first = page.getByRole('button', { name: '与智能体1聊天', exact: true });
const card = page.getByTestId('teacher-introduction');
await expect(first).not.toHaveAttribute('title');
await first.hover();
await expect(card).toBeVisible();
await expect(card.locator('.teacher-introduction-description')).toContainText('我是智能体1');
await page.getByRole('button', { name: '与智能体2聊天', exact: true }).hover();
await expect(card).toHaveCount(1);
await expect(card.locator('.teacher-introduction-description')).toContainText('我是智能体2');
await first.hover();
await expect(card.locator('.teacher-introduction-description')).toContainText('我是智能体1');
await expect.poll(async () => page.evaluate(() => {
const card = document.querySelector('[data-testid="teacher-introduction"]')!.getBoundingClientRect();
const viewport = document.querySelector('[data-testid="agent-browser-viewport"]')!.getBoundingClientRect();
return card.left >= 0 && card.right <= innerWidth && card.bottom <= innerHeight
&& (card.left >= viewport.right || card.right <= viewport.left || viewport.top - card.bottom >= 8);
})).toBe(true);
await card.hover();
await expect(card).toBeVisible();
await page.screenshot({ path: test.info().outputPath('teacher-hover-introduction.png') });
const cardBounds = (await card.boundingBox())!;
await page.screenshot({ path: test.info().outputPath('teacher-introduction-card.png'), clip: {
x: Math.max(0, cardBounds.x - 12), y: cardBounds.y - 12,
width: cardBounds.width + 24, height: cardBounds.height + 30,
} });
await page.mouse.move(0, 780);
await expect(card).toHaveCount(0);
await expect(page.getByTestId('agent-browser-panel')).toHaveCSS('margin-top', '0px');
const last = page.getByRole('button', { name: '与智能体8聊天', exact: true });
await last.focus();
await expect(card).toBeVisible();
await expect(card.locator('.teacher-introduction-description')).toContainText('我是智能体8');
await last.press('Escape');
await expect(card).toHaveCount(0);
await expect(last).toBeFocused();
await last.hover();
await expect(card).toBeVisible();
await last.click();
await expect(card).toHaveCount(0);
await expect(page.locator('#coding-consultation-dock')).toBeVisible();
const lastBounds = (await last.boundingBox())!;
await page.mouse.move(lastBounds.x + lastBounds.width / 2 + 2, lastBounds.y + lastBounds.height / 2);
await page.waitForTimeout(300);
await expect(card).toHaveCount(0);
await page.mouse.move(0, 780);
await last.hover();
await expect(card).toBeVisible();
await last.click();
await expect(page.locator('#coding-consultation-dock')).toHaveCount(0);
});
}
test('closing an introduction preserves the unread speech and its native preview clearance', async ({ page }) => {
await page.setViewportSize({ width: 1180, height: 720 });
await page.goto(`${baseUrl}?agents=2`);
await expect.poll(async () => (await geometry(page)).nativeGap).toBeGreaterThanOrEqual(8);
const original = (await geometry(page)).clearance;
await page.getByRole('button', { name: '与智能体2聊天', exact: true }).hover();
await expect(page.getByTestId('teacher-introduction')).toBeVisible();
await page.keyboard.press('Escape');
await expect(page.getByTestId('teacher-introduction')).toHaveCount(0);
await expect(page.getByTestId('teacher-invitation')).toBeVisible();
await expect.poll(async () => (await geometry(page)).clearance).toBe(original);
});
test('distributed icons load over HTTP and broken images fall back in the titlebar', async ({ page }) => {
await page.route('https://yuxi.example.test/api/storage/public/images/agent-0.png', route => route.fulfill({
contentType: 'image/svg+xml',