feat: AI 对话支持 A2UI 表单/审查/图表与 Excel 读取
This commit is contained in:
@@ -2,8 +2,12 @@ import { act } from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import { Bubble } from '@ant-design/x';
|
||||
import { afterEach, describe, expect, it } from 'vitest';
|
||||
import { aiBubbleRoles } from './AiChatDrawer';
|
||||
import type { AiChatMessage } from './types';
|
||||
import { aiBubbleRoles, conversationStatusMeta } from './AiChatDrawer';
|
||||
import { AiMessageContent } from './AiMessageContent';
|
||||
import { DynamicChart } from './DynamicChart';
|
||||
import { DynamicForm } from './DynamicForm';
|
||||
import { DynamicReview } from './DynamicReview';
|
||||
import type { AiChatMessage, AiChartSchema, AiReviewSchema } from './types';
|
||||
|
||||
let container: HTMLDivElement | null = null;
|
||||
let root: ReturnType<typeof createRoot> | null = null;
|
||||
@@ -16,6 +20,13 @@ afterEach(async () => {
|
||||
});
|
||||
|
||||
describe('AI chat bubble rendering', () => {
|
||||
it('maps conversation run statuses to list labels', () => {
|
||||
expect(conversationStatusMeta('running')).toEqual({ label: '生成中', color: 'processing' });
|
||||
expect(conversationStatusMeta('done')).toEqual({ label: '已完成', color: 'success' });
|
||||
expect(conversationStatusMeta('error')).toEqual({ label: '失败', color: 'error' });
|
||||
expect(conversationStatusMeta('stopped')).toEqual({ label: '已停止', color: 'default' });
|
||||
});
|
||||
|
||||
it('renders a structured user message instead of passing the object to React', async () => {
|
||||
const message: AiChatMessage = {
|
||||
role: 'user',
|
||||
@@ -32,11 +43,433 @@ describe('AI chat bubble rendering', () => {
|
||||
root?.render(
|
||||
<Bubble.List
|
||||
role={aiBubbleRoles}
|
||||
items={[{ key: 'user-1', role: 'user', status: 'local', content: message }]}
|
||||
items={[
|
||||
{
|
||||
key: 'user-1',
|
||||
role: 'user',
|
||||
status: 'local',
|
||||
content: message,
|
||||
contentRender: (content: AiChatMessage) => <div>{content.content}</div>,
|
||||
},
|
||||
]}
|
||||
/>,
|
||||
);
|
||||
});
|
||||
|
||||
expect(container.textContent).toContain('查询今天的系统概览');
|
||||
});
|
||||
|
||||
it('renders an A2UI form and submits normalized values', async () => {
|
||||
let submitted: Record<string, unknown> | null = null;
|
||||
container = document.createElement('div');
|
||||
document.body.appendChild(container);
|
||||
root = createRoot(container);
|
||||
|
||||
await act(async () => {
|
||||
root?.render(
|
||||
<DynamicForm
|
||||
form={{
|
||||
id: 'form-1',
|
||||
title: '新增学生',
|
||||
submitLabel: '提交创建',
|
||||
fields: [
|
||||
{ name: 'name', label: '姓名', type: 'input', required: true },
|
||||
{ name: 'studentNo', label: '学号', type: 'input' },
|
||||
],
|
||||
}}
|
||||
onSubmit={(values) => {
|
||||
submitted = values;
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
});
|
||||
|
||||
expect(container.textContent).toContain('新增学生');
|
||||
const input = container.querySelector('input#name') as HTMLInputElement | null;
|
||||
expect(input).not.toBeNull();
|
||||
if (input) {
|
||||
const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set;
|
||||
setter?.call(input, '张三');
|
||||
input.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
}
|
||||
const submitButton = container.querySelector('button[type="submit"]') as HTMLButtonElement | null;
|
||||
expect(submitButton).not.toBeNull();
|
||||
await act(async () => {
|
||||
submitButton?.click();
|
||||
});
|
||||
|
||||
expect(submitted).toEqual({ name: '张三' });
|
||||
expect(container.textContent).toContain('已提交');
|
||||
});
|
||||
|
||||
it('renders an A2UI review card and submits via the confirm button', async () => {
|
||||
let submittedId: string | null = null;
|
||||
const review: AiReviewSchema = {
|
||||
id: 'review-1',
|
||||
title: '开学导入',
|
||||
summary: '来自报名 Excel',
|
||||
status: 'pending',
|
||||
sections: [
|
||||
{
|
||||
key: 'students',
|
||||
type: 'students',
|
||||
title: '学生',
|
||||
kind: 'table',
|
||||
columns: [
|
||||
{ key: 'name', title: '姓名' },
|
||||
{ key: 'phone', title: '手机号' },
|
||||
],
|
||||
rows: [
|
||||
{ name: '张三', phone: '13800138000' },
|
||||
{ name: '李四', phone: '13900139000' },
|
||||
],
|
||||
issues: [],
|
||||
},
|
||||
],
|
||||
};
|
||||
container = document.createElement('div');
|
||||
document.body.appendChild(container);
|
||||
root = createRoot(container);
|
||||
|
||||
await act(async () => {
|
||||
root?.render(
|
||||
<DynamicReview
|
||||
review={review}
|
||||
onSubmit={(reviewId) => {
|
||||
submittedId = reviewId;
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
});
|
||||
|
||||
expect(container.textContent).toContain('开学导入');
|
||||
expect(container.textContent).toContain('确认导入本步');
|
||||
expect(container.textContent).toContain('全部确认并入库');
|
||||
const button = Array.from(container.querySelectorAll('button')).find((item) =>
|
||||
item.textContent?.includes('全部确认并入库'),
|
||||
) as HTMLButtonElement | undefined;
|
||||
expect(button).not.toBeNull();
|
||||
await act(async () => {
|
||||
button?.click();
|
||||
});
|
||||
const confirmButton = Array.from(document.body.querySelectorAll('button')).find(
|
||||
(item) => item.textContent?.trim() === '确认导入',
|
||||
) as HTMLButtonElement | undefined;
|
||||
expect(confirmButton).toBeDefined();
|
||||
await act(async () => {
|
||||
confirmButton?.click();
|
||||
await new Promise((resolve) => setTimeout(resolve, 50));
|
||||
});
|
||||
expect(submittedId).toBe('review-1');
|
||||
});
|
||||
|
||||
it('renders grouped sheets and confirms one type group via Popconfirm', async () => {
|
||||
let submittedGroup: { reviewId: string; type: string } | null = null;
|
||||
const review: AiReviewSchema = {
|
||||
id: 'review-2',
|
||||
title: '入住分表',
|
||||
status: 'pending',
|
||||
sections: [
|
||||
{
|
||||
key: 'checkins_girls_4',
|
||||
type: 'checkins',
|
||||
title: '四人间女',
|
||||
kind: 'table',
|
||||
columns: [
|
||||
{ key: 'name', title: '姓名' },
|
||||
{ key: 'roomNumber', title: '宿舍号' },
|
||||
],
|
||||
rows: [{ name: '张三', roomNumber: '4-401' }],
|
||||
issues: [],
|
||||
},
|
||||
{
|
||||
key: 'checkins_boys_4',
|
||||
type: 'checkins',
|
||||
title: '四人间男',
|
||||
kind: 'table',
|
||||
columns: [
|
||||
{ key: 'name', title: '姓名' },
|
||||
{ key: 'roomNumber', title: '宿舍号' },
|
||||
],
|
||||
rows: [{ name: '李四', roomNumber: '4-402' }],
|
||||
issues: [],
|
||||
},
|
||||
],
|
||||
};
|
||||
container = document.createElement('div');
|
||||
document.body.appendChild(container);
|
||||
root = createRoot(container);
|
||||
|
||||
await act(async () => {
|
||||
root?.render(
|
||||
<DynamicReview
|
||||
review={review}
|
||||
onSubmit={() => undefined}
|
||||
onConfirmGroup={(_, reviewId, type) => {
|
||||
submittedGroup = { reviewId, type };
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
});
|
||||
|
||||
expect(container.textContent).toContain('入住记录 · 共 2 张表');
|
||||
expect(container.textContent).toContain('确认本组 2 张表');
|
||||
const groupButton = Array.from(container.querySelectorAll('button')).find((item) =>
|
||||
item.textContent?.includes('确认本组 2 张表'),
|
||||
) as HTMLButtonElement | undefined;
|
||||
expect(groupButton).not.toBeNull();
|
||||
await act(async () => {
|
||||
groupButton?.click();
|
||||
});
|
||||
const confirmButton = Array.from(document.body.querySelectorAll('button')).find(
|
||||
(item) => item.textContent?.trim() === '确认导入',
|
||||
) as HTMLButtonElement | undefined;
|
||||
expect(confirmButton).toBeDefined();
|
||||
await act(async () => {
|
||||
confirmButton?.click();
|
||||
await new Promise((resolve) => setTimeout(resolve, 50));
|
||||
});
|
||||
expect(submittedGroup).toEqual({ reviewId: 'review-2', type: 'checkins' });
|
||||
});
|
||||
|
||||
it('renders legacy review sections missing type by inferring from key', async () => {
|
||||
const review: AiReviewSchema = {
|
||||
id: 'review-3',
|
||||
title: '旧数据预览',
|
||||
status: 'pending',
|
||||
sections: [
|
||||
{
|
||||
key: 'checkins_legacy',
|
||||
title: '旧入住表',
|
||||
kind: 'table',
|
||||
columns: [{ key: 'name', title: '姓名' }],
|
||||
rows: [{ name: '张三' }],
|
||||
issues: [],
|
||||
},
|
||||
],
|
||||
};
|
||||
container = document.createElement('div');
|
||||
document.body.appendChild(container);
|
||||
root = createRoot(container);
|
||||
await act(async () => {
|
||||
root?.render(<DynamicReview review={review} onSubmit={() => undefined} />);
|
||||
});
|
||||
expect(container.textContent).toContain('入住记录 · 共 1 张表');
|
||||
expect(container.textContent).toContain('旧入住表');
|
||||
});
|
||||
|
||||
it('renders an expired review card with table content but disabled actions', async () => {
|
||||
let confirmed = false;
|
||||
const review: AiReviewSchema = {
|
||||
id: 'review-4',
|
||||
title: '已被替代的预览',
|
||||
status: 'expired',
|
||||
sections: [
|
||||
{
|
||||
key: 'checkins_old',
|
||||
type: 'checkins',
|
||||
title: '旧入住表',
|
||||
kind: 'table',
|
||||
columns: [{ key: 'name', title: '姓名' }],
|
||||
rows: [{ name: '张三' }],
|
||||
issues: [],
|
||||
},
|
||||
],
|
||||
};
|
||||
container = document.createElement('div');
|
||||
document.body.appendChild(container);
|
||||
root = createRoot(container);
|
||||
await act(async () => {
|
||||
root?.render(
|
||||
<DynamicReview
|
||||
review={review}
|
||||
onSubmit={() => {
|
||||
confirmed = true;
|
||||
}}
|
||||
onConfirmStep={() => {
|
||||
confirmed = true;
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
});
|
||||
expect(container.textContent).toContain('已失效');
|
||||
expect(container.textContent).toContain('已被新的预览替代');
|
||||
expect(container.textContent).toContain('张三');
|
||||
expect(container.textContent).not.toContain('全部确认并入库');
|
||||
const disabledButton = Array.from(container.querySelectorAll('button')).find(
|
||||
(item) => item.textContent?.trim() === '已失效',
|
||||
) as HTMLButtonElement | undefined;
|
||||
expect(disabledButton).toBeDefined();
|
||||
expect(disabledButton?.disabled).toBe(true);
|
||||
await act(async () => {
|
||||
disabledButton?.click();
|
||||
});
|
||||
expect(confirmed).toBe(false);
|
||||
});
|
||||
|
||||
it('renders an A2UI chart card with title and chart container', async () => {
|
||||
const chart: AiChartSchema = {
|
||||
id: 'chart-1',
|
||||
title: '各班级人数',
|
||||
chartType: 'bar',
|
||||
columns: [
|
||||
{ key: 'className', title: '班级' },
|
||||
{ key: 'count', title: '人数' },
|
||||
],
|
||||
rows: [
|
||||
{ className: '一班', count: 20 },
|
||||
{ className: '二班', count: 15 },
|
||||
],
|
||||
};
|
||||
container = document.createElement('div');
|
||||
document.body.appendChild(container);
|
||||
root = createRoot(container);
|
||||
|
||||
await act(async () => {
|
||||
root?.render(<DynamicChart chart={chart} />);
|
||||
});
|
||||
|
||||
expect(container.textContent).toContain('各班级人数');
|
||||
expect(container.textContent).toContain('柱状图');
|
||||
expect(container.querySelector('.ai-chat-chart-card canvas')).not.toBeNull();
|
||||
expect(container.querySelector('.ai-chat-chart-card__download')).not.toBeNull();
|
||||
});
|
||||
|
||||
it('renders charts persisted on an assistant message', async () => {
|
||||
const message: AiChatMessage = {
|
||||
role: 'assistant',
|
||||
content: '这是学生性别比例图',
|
||||
reasoningContent: '',
|
||||
toolRuns: [],
|
||||
attachments: [],
|
||||
charts: [
|
||||
{
|
||||
id: 'chart-9',
|
||||
title: '学生性别比例',
|
||||
chartType: 'pie',
|
||||
columns: [
|
||||
{ key: 'gender', title: '性别' },
|
||||
{ key: 'count', title: '人数' },
|
||||
],
|
||||
rows: [
|
||||
{ gender: '男', count: 2 },
|
||||
{ gender: '女', count: 0 },
|
||||
{ gender: '未填写', count: 61 },
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
container = document.createElement('div');
|
||||
document.body.appendChild(container);
|
||||
root = createRoot(container);
|
||||
|
||||
await act(async () => {
|
||||
root?.render(<AiMessageContent message={message} />);
|
||||
});
|
||||
|
||||
expect(container.textContent).toContain('学生性别比例');
|
||||
expect(container.querySelector('.ai-chat-chart-card canvas')).not.toBeNull();
|
||||
});
|
||||
|
||||
it('renders source references from assistant message metadata', async () => {
|
||||
const message: AiChatMessage = {
|
||||
role: 'assistant',
|
||||
content: '这是基于你上传的名单整理的入住统计。',
|
||||
reasoningContent: '',
|
||||
toolRuns: [],
|
||||
attachments: [],
|
||||
metadata: {
|
||||
a2uiSources: [
|
||||
{ title: '26暑期文化课宿舍.xlsx', url: '/api/ai/chat/attachments/7', description: 'excel' },
|
||||
],
|
||||
},
|
||||
};
|
||||
container = document.createElement('div');
|
||||
document.body.appendChild(container);
|
||||
root = createRoot(container);
|
||||
|
||||
await act(async () => {
|
||||
root?.render(<AiMessageContent message={message} />);
|
||||
});
|
||||
|
||||
expect(container.textContent).toContain('引用来源');
|
||||
expect(container.textContent).toContain('26暑期文化课宿舍.xlsx');
|
||||
});
|
||||
|
||||
it('renders model retrying hint while waiting for the upstream retry', async () => {
|
||||
const message: AiChatMessage = {
|
||||
role: 'assistant',
|
||||
content: '',
|
||||
reasoningContent: '',
|
||||
toolRuns: [],
|
||||
attachments: [],
|
||||
retrying: { attempt: 2, maxRetries: 3, reason: '上游返回 503' },
|
||||
};
|
||||
container = document.createElement('div');
|
||||
document.body.appendChild(container);
|
||||
root = createRoot(container);
|
||||
|
||||
await act(async () => {
|
||||
root?.render(<AiMessageContent message={message} />);
|
||||
});
|
||||
|
||||
expect(container.textContent).toContain('正在自动重试（第 2 / 3 次）');
|
||||
expect(container.textContent).toContain('上游返回 503');
|
||||
});
|
||||
|
||||
it.each([
|
||||
['area', '面积图', [{ key: 'month', title: '月份' }, { key: 'amount', title: '金额' }], [
|
||||
{ month: '1月', amount: 100 },
|
||||
{ month: '2月', amount: 150 },
|
||||
]],
|
||||
['scatter', '散点图', [
|
||||
{ key: 'room', title: '宿舍' },
|
||||
{ key: 'capacity', title: '容量' },
|
||||
{ key: 'occupied', title: '入住人数' },
|
||||
], [
|
||||
{ room: '1-101', capacity: 4, occupied: 3 },
|
||||
{ room: '1-102', capacity: 6, occupied: 5 },
|
||||
]],
|
||||
['radar', '雷达图', [
|
||||
{ key: 'className', title: '班级' },
|
||||
{ key: 'attendance', title: '考勤' },
|
||||
{ key: 'score', title: '成绩' },
|
||||
], [
|
||||
{ className: '一班', attendance: 90, score: 85 },
|
||||
{ className: '二班', attendance: 80, score: 92 },
|
||||
]],
|
||||
['gauge', '仪表盘', [
|
||||
{ key: 'metric', title: '指标' },
|
||||
{ key: 'value', title: '数值' },
|
||||
{ key: 'max', title: '最大值' },
|
||||
], [
|
||||
{ metric: '入住率', value: 82, max: 100 },
|
||||
]],
|
||||
['funnel', '漏斗图', [
|
||||
{ key: 'stage', title: '阶段' },
|
||||
{ key: 'count', title: '人数' },
|
||||
], [
|
||||
{ stage: '咨询', count: 100 },
|
||||
{ stage: '报名', count: 60 },
|
||||
]],
|
||||
])('渲染 %s 图表卡片', async (chartType, label, columns, rows) => {
|
||||
const chart: AiChartSchema = {
|
||||
id: `chart-${chartType}`,
|
||||
title: `${label}示例`,
|
||||
chartType: chartType as AiChartSchema['chartType'],
|
||||
columns,
|
||||
rows,
|
||||
};
|
||||
container = document.createElement('div');
|
||||
document.body.appendChild(container);
|
||||
root = createRoot(container);
|
||||
|
||||
await act(async () => {
|
||||
root?.render(<DynamicChart chart={chart} />);
|
||||
});
|
||||
|
||||
expect(container.textContent).toContain(`${label}示例`);
|
||||
expect(container.textContent).toContain(label);
|
||||
expect(container.querySelector('.ai-chat-chart-card canvas')).not.toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user