workspace.spec.ts 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505
  1. import { expect, test } from '@playwright/test'
  2. test.beforeEach(async ({ page }) => {
  3. await page.goto('/chat')
  4. if (await page.getByRole('heading', { name: '登录 Hermes' }).isVisible()) {
  5. await page.getByLabel('账号').fill('test')
  6. await page.getByLabel('密码').fill('test')
  7. await page.getByRole('button', { name: '登录' }).click()
  8. }
  9. await expect(page.getByRole('navigation')).toBeVisible()
  10. })
  11. test('uses the yaoyao-webui grouped model picker without a mobile full-screen sheet', async ({ page }) => {
  12. await page.goto('/chat/session-demo')
  13. await page.locator('.composer-tool--model').click()
  14. const dialog = page.getByRole('dialog', { name: '选择模型' })
  15. await expect(dialog).toBeVisible()
  16. await expect(dialog.getByPlaceholder('搜索模型名称或 ID')).toBeFocused()
  17. await expect(dialog.locator('.model-dialog__group-header')).toContainText('OpenAI')
  18. await expect(dialog.locator('.model-dialog__item--active')).toContainText('gpt-5.6')
  19. const desktopBox = await dialog.boundingBox()
  20. expect(desktopBox?.width).toBeGreaterThanOrEqual(450)
  21. expect(desktopBox?.width).toBeLessThanOrEqual(480)
  22. await dialog.getByPlaceholder('搜索模型名称或 ID').fill('gpt-5.5')
  23. await expect(dialog.locator('.model-dialog__item')).toHaveCount(1)
  24. await page.keyboard.press('Escape')
  25. await expect(dialog).toBeHidden()
  26. await page.setViewportSize({ width: 390, height: 844 })
  27. await page.locator('.composer-tool--model').click()
  28. const mobileBox = await dialog.boundingBox()
  29. expect(mobileBox?.x).toBeGreaterThanOrEqual(12)
  30. expect(mobileBox?.width).toBeLessThanOrEqual(366)
  31. expect(mobileBox?.height).toBeLessThan(820)
  32. })
  33. test('navigates every 9119 workspace without blank transitions', async ({ page }) => {
  34. const consoleErrors: string[] = []
  35. page.on('console', message => { if (message.type() === 'error') consoleErrors.push(message.text()) })
  36. await expect(page.getByRole('option').first()).toContainText('夭夭 Web 验收会话')
  37. await expect(page.getByRole('option').first()).toContainText('夭夭')
  38. await expect(page.locator('.desktop-sidebar').getByText('已置顶 1', { exact: true })).toBeVisible()
  39. await page.getByRole('button', { name: '群聊' }).click()
  40. await expect(page.getByRole('heading', { name: '设计与工程协作' })).toBeVisible()
  41. await expect(page.getByRole('button', { name: '对话', exact: true })).toBeVisible()
  42. await expect(page.getByRole('button', { name: '群聊', exact: true })).toHaveCount(0)
  43. await expect(page.getByRole('button', { name: '文件库', exact: true })).toHaveCount(0)
  44. await expect(page.getByRole('button', { name: '产物', exact: true })).toHaveCount(0)
  45. await expect(page.getByRole('button', { name: '新建群聊' })).toBeVisible()
  46. await expect(page.getByRole('button', { name: '新建群聊' })).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
  47. await expect(page.getByRole('button', { name: '新建群聊' })).toHaveCSS('font-weight', '580')
  48. await expect(page.getByRole('button', { name: '管理群聊' })).toBeVisible()
  49. await expect(page.getByRole('button', { name: '发送消息' })).toBeVisible()
  50. await page.goto('/files')
  51. await expect(page.getByRole('heading', { name: '文件库', exact: true }).last()).toBeVisible()
  52. const fileSidebar = page.locator('.desktop-sidebar')
  53. await expect(fileSidebar.getByRole('button', { name: '新建聊天' })).toBeVisible()
  54. const compactControlHeights = await fileSidebar.locator('.sidebar-search-trigger, .sidebar-primary-action button, .sidebar-feature-nav button').evaluateAll(elements => (
  55. elements.map(element => element.getBoundingClientRect().height)
  56. ))
  57. expect(compactControlHeights.length).toBeGreaterThanOrEqual(4)
  58. expect(Math.max(...compactControlHeights)).toBeLessThanOrEqual(36)
  59. await expect(page.getByText('demo-report.pdf')).toBeVisible()
  60. const firstFileCard = page.locator('.library-grid article').first()
  61. const cardGeometry = await firstFileCard.evaluate(element => {
  62. const card = element.getBoundingClientRect()
  63. const preview = element.querySelector('.library-thumb')?.getBoundingClientRect()
  64. return { width: card.width, previewHeight: preview?.height || 0 }
  65. })
  66. expect(cardGeometry.width).toBeGreaterThanOrEqual(220)
  67. expect(cardGeometry.previewHeight).toBe(154)
  68. await page.getByText('demo-report.pdf').click()
  69. await expect(page.getByRole('dialog', { name: /预览 demo-report.pdf/ })).toBeVisible()
  70. await expect(page.locator('.preview-meta')).toHaveCount(0)
  71. const previewDialog = page.getByRole('dialog', { name: /预览 demo-report.pdf/ })
  72. await expect(previewDialog.getByRole('link', { name: '下载' })).toBeVisible()
  73. await expect(previewDialog.getByRole('button', { name: '加入输入框' })).toBeVisible()
  74. await expect(previewDialog.locator('.preview-close')).toBeVisible()
  75. const modalHeight = await page.locator('.preview-modal').evaluate(element => element.getBoundingClientRect().height)
  76. expect(modalHeight).toBeGreaterThan(600)
  77. await previewDialog.locator('.preview-close').click()
  78. await fileSidebar.getByRole('button', { name: '新建聊天' }).click()
  79. await expect(page).toHaveURL(/\/chat\/draft-[^?]+\?profile=yaoyao/)
  80. await page.goto('/artifacts')
  81. await expect(page).toHaveURL(/\/chat$/)
  82. await expect(page.getByRole('button', { name: '产物', exact: true })).toHaveCount(0)
  83. expect(consoleErrors).toEqual([])
  84. })
  85. test('previews an octet-stream Markdown file from the file library', async ({ page }) => {
  86. await page.route('**/api/app/files**', async route => {
  87. const url = new URL(route.request().url())
  88. if (url.pathname === '/api/app/files') {
  89. await route.fulfill({
  90. status: 200,
  91. contentType: 'application/json',
  92. body: JSON.stringify({
  93. profile: 'yaoyao',
  94. items: [{
  95. id: 'markdown-file',
  96. path: '/tmp/版本说明.md',
  97. name: '版本说明.md',
  98. extension: '.md',
  99. mimeType: 'application/octet-stream',
  100. size: 48,
  101. modifiedAt: Date.now() / 1000,
  102. exists: true,
  103. origins: [{ profile: 'yaoyao', sessionId: 'session-demo', sessionTitle: '夭夭 Web 验收会话' }],
  104. }],
  105. nextCursor: null,
  106. total: 1,
  107. }),
  108. })
  109. return
  110. }
  111. if (url.pathname === '/api/app/files/markdown-file/preview') {
  112. await route.fulfill({
  113. status: 200,
  114. contentType: 'application/octet-stream',
  115. body: '# 版本说明\n\n- Markdown 预览已恢复',
  116. })
  117. return
  118. }
  119. await route.continue()
  120. })
  121. await page.goto('/files')
  122. await page.getByText('版本说明.md', { exact: true }).click()
  123. const dialog = page.getByRole('dialog', { name: '预览 版本说明.md' })
  124. await expect(dialog.locator('.preview-text h1')).toHaveText('版本说明')
  125. await expect(dialog.getByText('Markdown 预览已恢复', { exact: true })).toBeVisible()
  126. })
  127. test('keeps pins first and loads the next session page at the list bottom', async ({ page }) => {
  128. const sidebar = page.locator('.desktop-sidebar')
  129. const items = sidebar.locator('.sidebar-list [role="option"]')
  130. await expect(items).toHaveCount(100)
  131. await expect(items.first()).toContainText('夭夭 Web 验收会话')
  132. await expect(sidebar.getByRole('button', { name: '继续加载会话' })).toBeVisible()
  133. const list = sidebar.locator('.sidebar-list')
  134. await list.evaluate(element => {
  135. element.scrollTop = element.scrollHeight
  136. element.dispatchEvent(new Event('scroll'))
  137. })
  138. await expect(items).toHaveCount(103)
  139. await expect(sidebar.getByRole('button', { name: '继续加载会话' })).toHaveCount(0)
  140. })
  141. test('switches the composer model to the selected historical session model', async ({ page }) => {
  142. await page.goto('/chat/session-demo?profile=yaoyao')
  143. await expect(page.locator('.composer-tool--model')).toContainText('gpt-5.6')
  144. await page.getByRole('option', { name: /第二个会话/ }).click()
  145. await expect(page.locator('.composer-tool--model')).toContainText('gpt-5.5')
  146. })
  147. test('restores a routed conversation even when unread-count refresh fails', async ({ page }) => {
  148. await page.route('**/api/app/sessions/unread*', async route => {
  149. await route.fulfill({ status: 503, contentType: 'application/json', body: JSON.stringify({ error: 'unread unavailable' }) })
  150. })
  151. await page.goto('/chat/session-demo')
  152. await expect(page.getByText('已整理完成。下面是', { exact: false })).toBeVisible()
  153. await page.reload()
  154. await expect(page.getByText('已整理完成。下面是', { exact: false })).toBeVisible()
  155. })
  156. test('opens a conversation even when marking it read is unsupported', async ({ page }) => {
  157. const pageErrors: string[] = []
  158. page.on('pageerror', error => pageErrors.push(error.message))
  159. await page.route('**/api/app/sessions/unread/*', async route => {
  160. await route.fulfill({ status: 405, contentType: 'application/json', body: JSON.stringify({ error: 'Method Not Allowed' }) })
  161. })
  162. await page.getByRole('option').filter({ hasText: '第二个会话' }).click()
  163. await expect(page).toHaveURL(/\/chat\/session-second\?profile=yaoyao/)
  164. await expect(page.getByText('已整理完成。下面是', { exact: false })).toBeVisible()
  165. expect(pageErrors).toEqual([])
  166. })
  167. test('syncs the blue fast-mode shortcut with the iOS-compatible session config', async ({ page }) => {
  168. await page.request.post('http://127.0.0.1:19119/__test/rpc-requests/reset')
  169. await page.goto('/chat/session-demo')
  170. const fast = page.getByRole('button', { name: '快速模式:已关闭' })
  171. await expect(fast).toHaveAttribute('aria-pressed', 'false')
  172. await fast.click()
  173. const enabled = page.getByRole('button', { name: '快速模式:已开启' })
  174. await expect(enabled).toHaveAttribute('aria-pressed', 'true')
  175. await expect(enabled).toHaveCSS('color', 'rgb(22, 119, 255)')
  176. await page.getByRole('textbox', { name: '输入消息,Enter 发送,Shift + Enter 换行' }).fill('使用快速模式')
  177. await page.getByRole('button', { name: '发送消息' }).click()
  178. await expect(page.getByText('这是来自假 Gateway 的流式回复。', { exact: true })).toBeVisible()
  179. const payload = await (await page.request.get('http://127.0.0.1:19119/__test/rpc-requests')).json() as { requests: Array<{ method: string; params: Record<string, unknown> }> }
  180. const fastConfigIndex = payload.requests.findIndex(request => request.method === 'config.set' && request.params.key === 'fast')
  181. const promptIndex = payload.requests.findIndex(request => request.method === 'prompt.submit')
  182. expect(fastConfigIndex).toBeGreaterThanOrEqual(0)
  183. expect(promptIndex).toBeGreaterThan(fastConfigIndex)
  184. expect(payload.requests[fastConfigIndex]?.params).toMatchObject({ key: 'fast', value: 'fast', scope: 'session' })
  185. await enabled.click()
  186. await expect(page.getByRole('button', { name: '快速模式:已关闭' })).toHaveAttribute('aria-pressed', 'false')
  187. await expect.poll(async () => {
  188. const next = await (await page.request.get('http://127.0.0.1:19119/__test/rpc-requests')).json() as typeof payload
  189. return next.requests.filter(request => request.method === 'config.set' && request.params.key === 'fast').at(-1)?.params.value
  190. }).toBe('normal')
  191. })
  192. test('reconciles an iOS fast-mode selection from the resumed 9119 session', async ({ page }) => {
  193. await page.request.post('http://127.0.0.1:19119/__test/rpc-requests/reset')
  194. await page.goto('/chat/session-yaoer?profile=yaoer')
  195. await expect(page.getByRole('button', { name: '快速模式:已关闭' })).toBeVisible()
  196. await page.getByRole('textbox', { name: '输入消息,Enter 发送,Shift + Enter 换行' }).fill('读取 iOS 快速模式')
  197. await page.getByRole('button', { name: '发送消息' }).click()
  198. await expect(page.getByRole('button', { name: '快速模式:已开启' })).toHaveCSS('color', 'rgb(22, 119, 255)')
  199. const payload = await (await page.request.get('http://127.0.0.1:19119/__test/rpc-requests')).json() as { requests: Array<{ method: string; params: Record<string, unknown> }> }
  200. expect(payload.requests.some(request => request.method === 'session.resume' && request.params.session_id === 'session-yaoer')).toBe(true)
  201. expect(payload.requests.some(request => request.method === 'config.set' && request.params.key === 'fast')).toBe(false)
  202. })
  203. test('keeps the show-thinking preference across sessions of the same Agent', async ({ page }) => {
  204. await page.goto('/chat/session-demo')
  205. await expect(page.locator('.turn-trace')).toHaveCount(1)
  206. await page.locator('.composer-tool[aria-label="设置"]').click()
  207. const setting = page.getByRole('switch', { name: /显示思考/ })
  208. await expect(setting).toHaveAttribute('aria-checked', 'true')
  209. await setting.click()
  210. await expect(page.locator('.turn-trace')).toHaveCount(0)
  211. await page.getByRole('option').filter({ hasText: '第二个会话' }).click()
  212. await expect(page.locator('.turn-trace')).toHaveCount(0)
  213. await page.locator('.composer-tool[aria-label="设置"]').click()
  214. await page.getByRole('switch', { name: /显示思考/ }).click()
  215. await expect(page.locator('.turn-trace')).toHaveCount(1)
  216. })
  217. test('restores a legacy session link under its owning Agent profile', async ({ page }) => {
  218. await page.goto('/chat/session-yaoer')
  219. await expect(page.getByText('瑶儿历史消息', { exact: true })).toBeVisible()
  220. await expect(page).toHaveURL(/\/chat\/session-yaoer\?profile=yaoer/)
  221. await page.reload()
  222. await expect(page.getByText('瑶儿历史消息', { exact: true })).toBeVisible()
  223. })
  224. test('renders historical assistant MEDIA as Markdown in chat and group chat', async ({ page }) => {
  225. await page.goto('/chat/session-demo')
  226. const image = page.locator('.markdown img[alt="夭夭 Logo"]')
  227. await expect(image).toBeVisible()
  228. await image.click()
  229. const mediaDialog = page.getByRole('dialog', { name: /预览 AppIcon-1024.png/ })
  230. await expect(mediaDialog).toBeVisible()
  231. await expect(mediaDialog.getByRole('button', { name: '下一张媒体' })).toBeVisible()
  232. await mediaDialog.getByRole('button', { name: '下一张媒体' }).click()
  233. await expect(mediaDialog.locator('img')).toHaveAttribute('src', /variant=2/)
  234. await page.keyboard.press('ArrowLeft')
  235. await expect(mediaDialog.locator('img')).not.toHaveAttribute('src', /variant=2/)
  236. await expect(mediaDialog.getByRole('link', { name: /下载 AppIcon-1024\.png/ })).toBeVisible()
  237. await page.keyboard.press('Escape')
  238. await expect(page.getByRole('dialog', { name: /预览 AppIcon-1024.png/ })).toBeHidden()
  239. await image.click()
  240. const reopenedMediaDialog = page.getByRole('dialog', { name: /预览 AppIcon-1024.png/ })
  241. await reopenedMediaDialog.getByRole('button', { name: '添加到聊天' }).click()
  242. await expect(reopenedMediaDialog).toBeHidden()
  243. await expect(page.locator('.composer-attachments img[alt="AppIcon-1024.png"]')).toBeVisible()
  244. await page.getByRole('button', { name: '群聊' }).click()
  245. await expect(page.locator('.markdown img[alt="AppIcon-1024.png"]')).toBeVisible()
  246. })
  247. test('renders persisted user file markers as attachment cards', async ({ page }) => {
  248. await page.goto('/chat/session-demo?profile=yaoyao')
  249. const userMessage = page.locator('[data-message-id="message-user-file"]')
  250. await expect(userMessage).toContainText('查看附件')
  251. await expect(userMessage.getByRole('button', { name: /测试报告\.docx/ })).toBeVisible()
  252. await expect(userMessage).not.toContainText('@file:')
  253. await expect(userMessage).not.toContainText('用户附加文件')
  254. })
  255. test('folds tool result rows into their expandable tool call', async ({ page }) => {
  256. await page.goto('/chat/session-demo')
  257. const trace = page.locator('.turn-trace').first()
  258. await expect(trace).not.toHaveAttribute('open', '')
  259. await expect(trace.locator('summary')).toContainText('思考与工具')
  260. await expect(trace.locator('summary')).toContainText('2 段思考 · 2 个工具')
  261. await trace.locator('summary').click()
  262. await expect(trace.locator('.turn-trace__reasoning')).toHaveCount(2)
  263. await expect(trace.locator('.tool-trace')).toHaveCount(2)
  264. await expect(trace.locator('.tool-trace__details')).toHaveCount(2)
  265. await expect(trace.locator('.tool-trace__details').filter({ hasText: '/tmp/demo-report.pdf' })).toBeVisible()
  266. await expect(page.locator('[data-message-id="message-tool-call"]')).toHaveCount(0)
  267. await expect(page.locator('.message--tool')).toHaveCount(0)
  268. })
  269. test('renders subtask completion as a collapsed timeline event', async ({ page }) => {
  270. await page.goto('/chat/session-demo')
  271. await expect(page.getByText('子任务已完成', { exact: true })).toBeVisible()
  272. const delegation = page.locator('.delegation-event').filter({ hasText: '子任务已完成' })
  273. await expect(delegation).toContainText('2 个子任务 · 2 已完成')
  274. await expect(delegation).not.toHaveAttribute('open', '')
  275. })
  276. test('renders context compaction as a collapsed timeline event', async ({ page }) => {
  277. await page.goto('/chat/session-demo')
  278. const compaction = page.locator('[data-message-id="message-compaction"] .compaction-event')
  279. await expect(compaction).toContainText('上下文已压缩')
  280. await expect(compaction).toContainText('压缩摘要已归档 · 点击查看')
  281. await expect(compaction).not.toHaveAttribute('open', '')
  282. await expect(compaction.getByText('Historical Task Snapshot', { exact: true })).toBeHidden()
  283. await compaction.locator('summary').click()
  284. await expect(compaction.getByText('Historical Task Snapshot', { exact: true })).toBeVisible()
  285. await expect(page.locator('[data-message-id="message-compaction"]')).toHaveClass(/message--system/)
  286. })
  287. test('renders model changes as a collapsed system event', async ({ page }) => {
  288. await page.goto('/chat/session-demo')
  289. await expect(page.getByText('模型已切换:gpt-5.6-terra', { exact: true })).toBeVisible()
  290. await expect(page.locator('.system-event')).not.toHaveAttribute('open', '')
  291. })
  292. test('opens a local message file link as a floating preview card', async ({ page }) => {
  293. await page.route('**/Users/samien/Agents/%E6%96%B9%E6%A1%88%E8%8D%89%E7%A8%BF.md', route => route.fulfill({
  294. status: 200,
  295. contentType: 'text/markdown',
  296. body: '# 会话文件\n\n这是会话中的文本文件。',
  297. }))
  298. await page.goto('/chat/session-demo')
  299. const card = page.getByRole('link', { name: '预览文件 方案草稿.md' })
  300. await expect(card).toHaveClass(/file-link-card/)
  301. await card.click()
  302. const dialog = page.getByRole('dialog', { name: '预览 方案草稿.md' })
  303. await expect(dialog).toBeVisible()
  304. await expect(dialog.locator('.preview-text')).toBeVisible()
  305. const textPadding = await dialog.locator('.preview-text').evaluate(element => {
  306. const style = getComputedStyle(element)
  307. return { left: Number.parseFloat(style.paddingLeft), right: Number.parseFloat(style.paddingRight) }
  308. })
  309. expect(textPadding.left).toBeGreaterThanOrEqual(24)
  310. expect(textPadding.right).toBeGreaterThanOrEqual(24)
  311. const stageHeight = await dialog.locator('.preview-stage').evaluate(stage => stage.getBoundingClientRect().height)
  312. expect(stageHeight).toBeGreaterThan(500)
  313. })
  314. test('shows a thinking animation after submit until output starts', async ({ page }) => {
  315. await page.goto('/chat/session-demo?profile=yaoyao')
  316. await page.locator('.composer-textarea').fill('请开始思考')
  317. await page.getByRole('button', { name: '发送消息' }).click()
  318. await expect(page.locator('.thinking-indicator')).toBeVisible()
  319. await expect(page.getByText('这是来自假 Gateway 的流式回复。', { exact: true })).toBeVisible()
  320. await expect(page.locator('.thinking-indicator')).toHaveCount(0)
  321. })
  322. test('keeps the canonical logo and yaoyao-webui composer geometry', async ({ page }) => {
  323. const logo = page.locator('.rail__brand img')
  324. await expect(logo).toHaveAttribute('src', '/brand/AppIcon-1024.png')
  325. const emptyLogo = page.locator('.new-chat-empty__logo')
  326. await expect(emptyLogo).toHaveAttribute('src', '/brand/AppIcon-1024.png')
  327. await expect(page.getByText('聊点什么', { exact: true })).toBeVisible()
  328. await expect(page.locator('.timeline-header')).toHaveClass(/timeline-header--transparent/)
  329. await expect(page.locator('.composer-context')).toContainText('剩余 256.0k')
  330. await page.getByRole('button', { name: '推理强度:默认' }).click()
  331. await expect(page.locator('.composer-popover--reasoning')).toBeVisible()
  332. await page.getByRole('button', { name: '设置' }).click()
  333. await expect(page.locator('.composer-popover--settings')).toBeVisible()
  334. await expect(page.getByText('语音输入设置', { exact: true })).toBeVisible()
  335. await page.locator('.composer-shell').click()
  336. await page.getByRole('option').first().click()
  337. await expect(page.locator('.timeline')).toHaveCSS('background-color', 'rgb(255, 255, 255)')
  338. await expect(page.locator('.message--assistant .message__avatar')).toHaveCount(0)
  339. await expect(page.locator('.message--assistant .message__meta')).toHaveCount(0)
  340. const assistantMessage = page.locator('.message--assistant-anonymous:not(.message--tool-only)').first()
  341. await page.mouse.move(1200, 20)
  342. await expect(assistantMessage.locator('.message__actions')).toHaveCSS('opacity', '0')
  343. await assistantMessage.hover()
  344. await expect(assistantMessage.locator('.message__actions')).toHaveCSS('opacity', '1')
  345. await expect(page.locator('.message--tool-only .message__actions')).toHaveCount(0)
  346. await expect(page.locator('[data-message-id="message-thinking-tool"]')).toHaveCount(0)
  347. await expect(page.locator('.turn-trace')).toHaveCount(1)
  348. const userMessageMeta = page.locator('.message--user .message__meta')
  349. await expect(userMessageMeta).not.toHaveCount(0)
  350. expect(await userMessageMeta.evaluateAll(elements => elements.every(element => getComputedStyle(element).display === 'none'))).toBe(true)
  351. await expect(page.getByRole('button', { name: '会话操作' })).toBeVisible()
  352. await page.getByRole('button', { name: '会话操作' }).click()
  353. const sessionMenu = page.getByRole('menu', { name: '会话操作' })
  354. await expect(sessionMenu.getByText('会话大纲', { exact: true })).toBeVisible()
  355. await sessionMenu.getByText('会话大纲', { exact: true }).click()
  356. const outline = page.getByRole('navigation', { name: '会话大纲' })
  357. await expect(outline).toBeVisible()
  358. await expect(outline.getByText('请检查今天生成的产物。MEDIA:/brand/AppIcon-1024.png', { exact: true })).toBeVisible()
  359. await expect(outline.getByText('验收摘要', { exact: true })).toBeVisible()
  360. await outline.getByRole('button', { name: '跳转到 验收摘要' }).click()
  361. await expect(page.locator('[data-message-id="message-assistant"]')).toHaveClass(/message--revealed/)
  362. await page.getByRole('button', { name: '关闭会话大纲' }).click()
  363. await expect(outline).toBeHidden()
  364. await page.getByRole('button', { name: '会话操作' }).click()
  365. await expect(sessionMenu.getByText('取消置顶', { exact: true })).toBeVisible()
  366. const unpinIcon = sessionMenu.getByRole('menuitem', { name: '取消置顶' }).locator('.app-icon')
  367. await expect(unpinIcon.locator('path')).toHaveCount(2)
  368. await expect(unpinIcon.locator('path').last()).toHaveAttribute('d', 'M4 4l16 16')
  369. await expect(page.locator('.desktop-sidebar .sidebar-item--single-line').first().locator('.app-icon path')).toHaveAttribute('fill', 'currentColor')
  370. await expect(sessionMenu.getByText('重命名', { exact: true })).toBeVisible()
  371. await expect(sessionMenu.getByText('删除会话', { exact: true })).toBeVisible()
  372. await expect(page.getByText('置顶会话', { exact: true })).toHaveCount(0)
  373. const menuBox = await sessionMenu.evaluate(element => element.getBoundingClientRect().toJSON())
  374. expect(menuBox.width).toBeLessThanOrEqual(220)
  375. expect(menuBox.height).toBeLessThan(165)
  376. await expect(page.locator('.session-action-layer')).toHaveCount(0)
  377. await sessionMenu.getByText('取消置顶', { exact: true }).click()
  378. await expect(page.locator('.desktop-sidebar').getByText('已置顶 1', { exact: true })).toHaveCount(0)
  379. await page.getByRole('button', { name: '会话操作' }).click()
  380. await sessionMenu.getByText('置顶会话', { exact: true }).click()
  381. await expect(page.locator('.desktop-sidebar').getByText('已置顶 1', { exact: true })).toBeVisible()
  382. const compactSession = page.locator('.desktop-sidebar .sidebar-item--single-line').first()
  383. const compactMetrics = await compactSession.evaluate(element => {
  384. const title = element.querySelector('strong')
  385. return {
  386. height: element.getBoundingClientRect().height,
  387. weight: title ? Number(getComputedStyle(title).fontWeight) : 0,
  388. }
  389. })
  390. expect(compactMetrics.height).toBeLessThanOrEqual(31)
  391. expect(compactMetrics.weight).toBeLessThan(500)
  392. await compactSession.click({ button: 'right' })
  393. await expect(sessionMenu).toBeVisible()
  394. await page.keyboard.press('Escape')
  395. const composer = page.locator('.composer-shell')
  396. await expect(composer).toBeVisible()
  397. const geometry = await composer.evaluate(element => {
  398. const rect = element.getBoundingClientRect()
  399. const style = getComputedStyle(element)
  400. return { width: rect.width, minHeight: style.minHeight, radius: style.borderRadius }
  401. })
  402. expect(geometry.width).toBeLessThanOrEqual(760)
  403. expect(geometry.minHeight).toBe('72px')
  404. expect(geometry.radius).toBe('18px')
  405. const send = page.getByRole('button', { name: '发送消息' })
  406. await expect(send).toHaveCSS('width', '34px')
  407. await expect(send).toHaveCSS('height', '34px')
  408. })
  409. test('uses the unified Grok-style sidebar, search trigger, and persistent collapse', async ({ page }) => {
  410. const sidebar = page.locator('.desktop-sidebar')
  411. await expect(sidebar).toBeVisible()
  412. await expect(sidebar).toHaveCSS('width', '264px')
  413. await expect(sidebar.locator('.brand-mark__name')).toHaveCount(0)
  414. await expect(sidebar.locator('.profile-switcher')).toHaveCount(0)
  415. await expect(sidebar.locator('.sidebar-account-switcher')).toHaveCount(1)
  416. await expect(page.getByRole('button', { name: '搜索', exact: true })).toBeVisible()
  417. await expect(page.getByRole('button', { name: '新建聊天', exact: true })).toBeVisible()
  418. await expect(page.getByRole('button', { name: '新建聊天', exact: true })).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
  419. await expect(page.getByRole('button', { name: '新建聊天', exact: true })).toHaveCSS('font-weight', '580')
  420. await expect(sidebar.getByText('历史记录', { exact: true })).toBeVisible()
  421. const searchTrigger = page.getByRole('button', { name: '搜索', exact: true })
  422. const triggerBox = await searchTrigger.boundingBox()
  423. await searchTrigger.click()
  424. const search = page.getByPlaceholder('搜索会话').filter({ visible: true })
  425. await expect(search).toBeVisible()
  426. await page.waitForTimeout(150)
  427. const inputBox = await search.evaluate(element => {
  428. const rect = element.closest('label')?.getBoundingClientRect()
  429. return rect ? { y: rect.y, height: rect.height } : null
  430. })
  431. expect(inputBox?.y).toBe(triggerBox?.y)
  432. expect(inputBox?.height).toBe(triggerBox?.height)
  433. await search.fill('验收')
  434. await expect(page.getByRole('option', { name: /夭夭 Web 验收会话/ })).toBeVisible()
  435. await search.press('Escape')
  436. await expect(search).toBeHidden()
  437. await expect(searchTrigger).toBeVisible()
  438. await expect(searchTrigger).toHaveAttribute('aria-expanded', 'false')
  439. await page.getByRole('button', { name: '折叠侧边栏' }).click()
  440. await expect(sidebar).toHaveCSS('width', '68px')
  441. const collapseBox = await page.getByRole('button', { name: '展开侧边栏' }).boundingBox()
  442. const accountBox = await sidebar.locator('.sidebar-account-switcher__main').boundingBox()
  443. expect(collapseBox?.y).toBeLessThan(accountBox?.y ?? 0)
  444. await expect(sidebar.getByText('历史记录', { exact: true })).toBeHidden()
  445. await expect(page.getByRole('button', { name: '搜索', exact: true })).toBeVisible()
  446. await expect(page.getByRole('button', { name: '新建聊天', exact: true })).toBeVisible()
  447. await page.reload()
  448. await expect(sidebar).toHaveCSS('width', '68px')
  449. await page.getByRole('button', { name: '搜索', exact: true }).click()
  450. await expect(sidebar).toHaveCSS('width', '264px')
  451. await expect(page.getByPlaceholder('搜索会话').filter({ visible: true })).toBeVisible()
  452. })
  453. test('uses the mobile composer and keeps the closed drawer inert', async ({ page }) => {
  454. await page.setViewportSize({ width: 390, height: 844 })
  455. await page.reload()
  456. await expect(page.getByRole('navigation')).not.toBeVisible()
  457. const drawer = page.locator('.mobile-drawer')
  458. await expect(drawer).toHaveAttribute('aria-hidden', 'true')
  459. await expect(drawer).toHaveAttribute('inert', '')
  460. await expect(page.locator('.composer-shell')).toHaveCSS('min-height', '118px')
  461. await expect(page.locator('.composer-textarea')).toHaveCSS('font-size', '16px')
  462. })