workspace.spec.ts 25 KB

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