yaoyao/tests/e2e/workspace-chat.spec.ts

import { test, expect, type Page } from '@playwright/test'
async function login(page: Page) {
  await page.goto('/conversations')
  await page.getByRole('textbox', { name: '账号', exact: true }).fill('fixture')
  await page.getByRole('textbox', { name: '密码', exact: true }).fill('fixture-pass')
  await page.getByRole('button', { name: '登录', exact: true }).click()
  await expect(page.getByRole('heading', { name: '还没有聊天' })).toBeVisible()
}
async function openCreate(page: Page, name: '新建 Bot' | '新建群聊') {
  await page.locator('.desktop-sidebar .sidebar-create-trigger').click()
  await page.getByRole('menuitem', { name, exact: true }).click()
}
async function createAgent(page: Page, name: string) {
  await openCreate(page, '新建 Bot')
  const dialog = page.getByRole('dialog')
  await dialog.getByRole('textbox', { name: '名称', exact: true }).fill(name)
  await dialog
    .getByRole('textbox', { name: '角色提示词与规则', exact: true })
    .fill(`你是${name}，每次回复给出验收证据。`)
  await dialog.getByRole('button', { name: `使用颜色 ${name === '产品经理' ? '#ff6b00' : '#00b9ac'}`, exact: true }).click()
  await dialog.locator('.mascot-grid--shape button').filter({ hasText: name === '产品经理' ? '圆形' : '小三角' }).first().click()
  await dialog.getByRole('button', { name: '保存', exact: true }).click()
  await expect(page.getByRole('heading', { name, exact: true })).toBeVisible()
}
test('created roles and editable teams share a durable chat list without plugin calls', async ({
  page,
  context,
}, testInfo) => {
  const pluginCalls: string[] = []
  page.on('request', (r) => {
    if (r.url().includes('/plugins/yaoyao')) pluginCalls.push(r.url())
  })
  await page.setViewportSize({ width: 1638, height: 874 })
  await login(page)
  const rail = page.locator('.desktop-sidebar')
  await expect(rail.locator('.sidebar-feature-nav')).toHaveCount(0)
  await expect(rail.locator('.sidebar-primary-action')).toHaveCount(0)
  await expect(rail).toHaveCSS('width', '360px')
  await expect(rail.locator('.sidebar-context__heading')).toHaveCount(0)
  await expect(rail.locator('.bot-logo-trigger .brand-mark')).toBeVisible()
  await expect(rail.locator('.sidebar-footer')).toBeVisible()
  await expect(rail.locator('.sidebar-account-switcher__main')).toContainText('fixture')
  await expect(rail.locator('.sidebar-account-switcher__main .account-initial-avatar')).toHaveText('F')
  await rail.getByRole('button', { name: '设置与模式', exact: true }).click()
  await expect(page.getByRole('menu', { name: '设置与模式' }).getByRole('menuitem')).toHaveText(['进入设置', '进入聊天模式'])
  await page.getByRole('menuitem', { name: '进入设置', exact: true }).click()
  const settings = page.getByRole('dialog', { name: '设置中心', exact: true })
  await expect(settings.locator('.settings-account-summary')).toContainText('fixture')
  await expect(settings.locator('.settings-account-summary .account-initial-avatar')).toHaveText('F')
  await settings.locator('.account-avatar-card input[type=file]').setInputFiles({name:'account.png',mimeType:'image/png',buffer:Buffer.from('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=','base64')})
  await expect(settings.locator('.settings-account-summary .account-initial-avatar img')).toBeVisible()
  expect((await (await page.request.get('/api/app/bootstrap')).json()).user.avatar).toMatch(/^data:image\/png;base64,/)
  await settings.getByRole('button', {name:'使用首字母',exact:true}).click()
  await expect(settings.locator('.settings-account-summary .account-initial-avatar')).toHaveText('F')
  await settings.getByRole('button', { name: '身份与头像', exact: true }).click()
  await settings.getByRole('button', { name: '造型：星星', exact: true }).click()
  await settings.getByRole('button', { name: '使用颜色 #1488ff', exact: true }).click()
  await settings.locator('.mascot-grid--expression button').filter({ hasText: '开心' }).click()
  await settings.getByRole('button', { name: '保存更改', exact: true }).click()
  await expect(settings.getByRole('button', { name: '保存更改', exact: true })).toBeDisabled()
  await settings.getByRole('button', { name: '关闭设置中心', exact: true }).click()
  await rail.locator('.sidebar-account-switcher__main').click()
  await settings.getByRole('button', { name: '身份与头像', exact: true }).click()
  await expect(settings.getByRole('button', { name: '造型：星星', exact: true })).toHaveAttribute('aria-pressed', 'true')
  await expect(settings.getByRole('button', { name: '使用颜色 #1488ff', exact: true })).toHaveAttribute('aria-pressed', 'true')
  await expect(settings.locator('.mascot-grid--expression button').filter({ hasText: '开心' })).toHaveAttribute('aria-pressed', 'true')
  await settings.getByRole('button', { name: '关闭设置中心', exact: true }).click()
  await expect(rail.getByRole('checkbox', { name: '显示已归档' })).toHaveCount(0)
  const plus = rail.getByRole('button', { name: '新建', exact: true })
  await expect(rail.locator('.sidebar-collapse')).toHaveCount(0)
  await plus.click()
  await expect(page.getByRole('menu', { name: '新建聊天' }).getByRole('menuitem')).toHaveCount(2)
  await page.keyboard.press('Escape')
  await rail.getByRole('button', { name: '搜索', exact: true }).click()
  await expect(page.getByRole('dialog', { name: '搜索聊天' })).toBeVisible()
  await page.keyboard.press('Escape')
  await page.goto('/chat')
  await expect(rail).toHaveCSS('width', '264px')
  await expect(rail.getByRole('button', { name: '聊天', exact: true })).toHaveCount(0)
  await rail.getByRole('button', { name: '设置与模式', exact: true }).click()
  const settingsMenu = page.getByRole('menu', { name: '设置与模式', exact: true })
  await expect(settingsMenu.getByRole('menuitem')).toHaveText(['进入设置', '进入 Bot 模式'])
  await page.screenshot({ path: testInfo.outputPath('chat-settings-mode-menu.png') })
  await settingsMenu.getByRole('menuitem', { name: '进入设置', exact: true }).click()
  await expect(page.getByRole('dialog', { name: '设置中心', exact: true })).toBeVisible()
  await page.getByRole('button', { name: '关闭设置中心', exact: true }).click()
  await expect(rail.getByRole('button', { name: '设置与模式', exact: true })).toBeFocused()
  await rail.getByRole('button', { name: '设置与模式', exact: true }).click()
  await settingsMenu.getByRole('menuitem', { name: '进入 Bot 模式', exact: true }).click()
  await expect(page).toHaveURL(/\/conversations$/)
  await expect(rail).toHaveCSS('width', '360px')
  await page.addInitScript(() => { Object.defineProperty(crypto, 'randomUUID', { value: undefined, configurable: true }) })
  await page.reload()
  await createAgent(page, '产品经理')
  await page.getByRole('button', {name:'聊天设置',exact:true}).click()
  const avatarEditor = page.getByRole('dialog')
  await expect(avatarEditor.locator('.color-grid button')).toHaveCount(11)
  await expect(avatarEditor.locator('.mascot-grid--expression button')).toHaveCount(10)
  await avatarEditor.getByRole('button', {name:'造型：星星',exact:true}).click()
  await avatarEditor.locator('.mascot-grid--expression button').filter({hasText:'自豪'}).click()
  await avatarEditor.getByRole('button', {name:'使用颜色 #000000',exact:true}).click()
  await avatarEditor.getByRole('button', {name:'保存',exact:true}).click()
  const identities = await (await page.request.get('/api/app/agents')).json()
  const edited = identities.agents.find((a: {name:string}) => a.name === '产品经理')
  expect(JSON.parse(edited.avatar.slice('yaoyao-avatar:v2:'.length))).toMatchObject({version:2,bodyId:'star',expression:'proud',color:'#000000'})
  await page.reload()
  await page.getByRole('button', {name:'聊天设置',exact:true}).click()
  await expect(avatarEditor.getByRole('button', {name:'造型：星星',exact:true})).toHaveAttribute('aria-pressed','true')
  await avatarEditor.locator('input[type=file]').setInputFiles({name:'avatar.png',mimeType:'image/png',buffer:Buffer.from('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=','base64')})
  await expect(avatarEditor.getByText('图片裁剪',{exact:true})).toBeVisible()
  let photoBytes=''
  for(const [label,crop] of [['圆形','circle'],['方形','square'],['圆角方形','rounded']]){
    await avatarEditor.getByRole('button',{name:label,exact:true}).click()
    await avatarEditor.getByRole('button',{name:'保存',exact:true}).click()
    const payload=await (await page.request.get('/api/app/agents')).json()
    const avatar=JSON.parse(payload.agents.find((a:{name:string})=>a.name==='产品经理').avatar.slice('yaoyao-avatar:v2:'.length))
    expect(avatar).toMatchObject({avatarMode:'image',imageCrop:crop})
    if(photoBytes)expect(avatar.imageDataURL).toBe(photoBytes)
    else photoBytes=avatar.imageDataURL
    await page.getByRole('button',{name:'聊天设置',exact:true}).click()
  }
  await avatarEditor.getByRole('button',{name:'动态吉祥物',exact:true}).click()

  await avatarEditor.locator('.mascot-grid--shape button').filter({hasText:'圆形'}).first().click()
  await avatarEditor.getByRole('button', {name:'使用颜色 #ff6b00',exact:true}).click()
  await avatarEditor.locator('.mascot-grid--expression button').filter({hasText:'默认'}).click()
  await avatarEditor.getByRole('button', {name:'保存',exact:true}).click()

  await expect(rail.getByText('聊天', { exact: true })).toHaveCount(0)
  await expect(rail.getByText('聊天列表', { exact: true })).toHaveCount(0)
  await expect(rail.locator('.sidebar-item__row strong').first()).toHaveCSS('font-size', '15px')
  await expect(rail.locator('.sidebar-item__row--secondary').first()).toHaveCSS('font-size', '13px')
  await expect(rail.locator('.sidebar-item__row small').first()).toHaveCSS('font-size', '10px')
  await page.getByPlaceholder('输入消息，Enter 发送，Shift + Enter 换行').fill('请说明角色职责')
  await page.getByRole('button', { name: '发送消息', exact: true }).click()
  await expect(page.locator('.message--assistant')).toContainText('我是产品经理')
  for (const colorScheme of ['light', 'dark'] as const) {
    await page.emulateMedia({ colorScheme })
    for (const selector of ['.message__avatar.agent-avatar', '.desktop-sidebar .sidebar-item__icon--avatar', '.desktop-sidebar .agent-avatar']) {
      await expect(page.locator(selector).first()).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
      await expect(page.locator(selector).first()).toHaveCSS('background-image', 'none')
    }
  }
  await page.emulateMedia({ colorScheme: 'light' })

  await expect(page.locator('.message--assistant a').first()).toHaveAttribute(
    'href',
    /\/api\/app\/files\/.+\/download/,
  )
  await page.locator('.message--assistant a').first().click()
  const textPreview = page.getByRole('dialog', { name: '预览 workspace-report.txt', exact: true })
  await expect(textPreview).toBeVisible()
  await expect(textPreview).toContainText('Fixture report')
  await textPreview.getByRole('button', { name: '关闭预览' }).click()
  await page.getByRole('button', {name:'置顶聊天',exact:true}).click()
  await expect(page.getByRole('button', {name:'取消置顶',exact:true})).toBeVisible()
  const directURL = page.url()
  await createAgent(page, '开发工程师')
  await expect(page.locator('.message')).toHaveCount(0)
  await openCreate(page, '新建群聊')
  const dialog = page.getByRole('dialog')
  await dialog.getByRole('textbox', { name: '名称', exact: true }).fill('产品开发团队')
  await dialog.getByRole('checkbox', { name: '产品经理', exact: true }).check()
  await dialog.getByRole('checkbox', { name: '开发工程师', exact: true }).check()
  await dialog
    .getByRole('combobox', { name: '管理员', exact: true })
    .selectOption({ label: '产品经理' })
  await dialog.getByRole('button', { name: '保存', exact: true }).click()
  await expect(page.getByRole('heading', { name: '产品开发团队', exact: true })).toBeVisible()
  await expect(page.locator('.desktop-sidebar .sidebar-item')).toHaveCount(3)
  // Every cluster portrait must be the same portrait shown in that member's direct chat.
  const groupRow = page.locator('.desktop-sidebar .sidebar-item').filter({ hasText: '产品开发团队' })
  await expect(groupRow.locator('.team-avatar__member')).toHaveCount(2)
  for (const name of ['产品经理', '开发工程师']) {
    const portrait = `.agent-avatar[aria-label="${name} 的头像"]`
    const direct = page.locator('.desktop-sidebar .sidebar-item').filter({ hasText: name }).filter({ hasNot: page.locator('.team-avatar') }).locator(portrait)
    const member = groupRow.locator(portrait)
    await expect(member.locator('[data-part=outline] > :first-child')).toHaveAttribute('fill', await direct.locator('[data-part=outline] > :first-child').getAttribute('fill') || '')
    expect(await member.locator('[data-part=outline] > :first-child').evaluate(el => el.tagName))
      .toBe(await direct.locator('[data-part=outline] > :first-child').evaluate(el => el.tagName))
  }
  await expect(page.locator('.desktop-sidebar')).not.toContainText('话题')
  await expect(page.locator('.desktop-sidebar .sidebar-account-switcher__main')).not.toContainText(
    '通用助手',
  )
  await page.getByRole('button', { name: '聊天设置', exact: true }).click()
  await expect(dialog.getByRole('checkbox', { name: '产品经理', exact: true })).toBeDisabled()
  await expect(dialog.getByRole('checkbox', { name: '开发工程师', exact: true })).toBeEnabled()
  await dialog.getByRole('button', { name: '取消', exact: true }).click()
  await page.getByPlaceholder('输入消息，Enter 发送，Shift + Enter 换行').fill('请@开发工程师给出实现结果')
  await page.getByRole('button', { name: '发送消息', exact: true }).click()
  await expect(page.locator('.message--assistant')).toHaveCount(3)
  await expect(page.locator('.message--assistant').nth(1)).toContainText('我是开发工程师')
  await expect(page.locator('.run-status')).toHaveCount(0)
  const second = await context.newPage()
  await second.goto(page.url())
  await expect(second.locator('.message--assistant')).toHaveCount(3)
  await page.screenshot({ path: testInfo.outputPath('mixed-chats.png'), fullPage: true })
  const groupURL=page.url()
  await page.getByRole('button', { name: '聊天设置', exact: true }).click()
  await dialog.getByRole('checkbox', { name: '开发工程师', exact: true }).uncheck()
  await expect(dialog.getByRole('checkbox', { name: '产品经理', exact: true })).toBeDisabled()
  await dialog.getByRole('button', { name: '保存', exact: true }).click()
  await expect(groupRow.locator('.team-avatar__member')).toHaveCount(1)
  await expect(page.locator('.message--assistant')).toHaveCount(3)
  await expect(second.locator('.desktop-sidebar .sidebar-item').filter({ hasText: '产品开发团队' }).locator('.team-avatar__member')).toHaveCount(1)
  await page.reload()
  await page.getByRole('button', { name: '聊天设置', exact: true }).click()
  await expect(dialog.getByRole('checkbox', { name: '开发工程师', exact: true })).not.toBeChecked()
  await dialog.getByRole('button', { name: '取消', exact: true }).click()
  await createAgent(page, '新成员')
  await page.goto(groupURL)
  await page.getByRole('button', { name: '聊天设置', exact: true }).click()
  await dialog.getByRole('checkbox', { name: '新成员', exact: true }).check()
  await dialog.getByRole('checkbox', { name: '产品经理', exact: true }).scrollIntoViewIfNeeded()
  await page.screenshot({ path: testInfo.outputPath('member-settings.png'), fullPage: true })
  await dialog.getByRole('button', { name: '保存', exact: true }).click()
  await expect(groupRow.locator('.team-avatar__member')).toHaveCount(2)
  await expect(groupRow.locator('[aria-label="开发工程师 的头像"]')).toHaveCount(0)
  await expect(groupRow.locator('[aria-label="新成员 的头像"]')).toHaveCount(1)
  await page.getByPlaceholder('输入消息，Enter 发送，Shift + Enter 换行').fill('请@新成员继续')
  await page.getByRole('button', { name: '发送消息', exact: true }).click()
  await expect(page.locator('.message--assistant')).toHaveCount(6)
  await expect(page.locator('.message--assistant').nth(4)).toContainText('我是新成员')
  await page.goto('/files')
  await page.getByRole('button',{name:'查看来源',exact:true}).first().click()
  await expect(page).toHaveURL(groupURL)
  await page.getByRole('button', { name: '归档聊天', exact: true }).click()
  await expect(page.locator('.desktop-sidebar .sidebar-item')).toHaveCount(3)
  await page.locator('.desktop-sidebar .sidebar-search-trigger').click()
  const search = page.getByRole('dialog', { name: '搜索聊天', exact: true })
  await expect(search).toBeVisible()
  await search.getByRole('searchbox', { name: '搜索聊天', exact: true }).fill('产品开发')
  await expect(search.getByRole('option')).toHaveCount(0)
  await search.getByRole('tab', { name: '已归档', exact: true }).click()
  await expect(search.getByRole('searchbox')).toHaveValue('产品开发')
  await expect(search.getByRole('option')).toHaveCount(1)
  await page.screenshot({ path: testInfo.outputPath('archived-chat-search.png'), fullPage: true })
  await search.getByRole('option').click()
  await expect(search).not.toBeVisible()
  await page.getByRole('button', { name: '恢复聊天', exact: true }).click()
  await page.goto(directURL)
  await expect(page.locator('.message--assistant')).toHaveCount(1)
  await expect(page.locator('.message--assistant')).toContainText('我是产品经理')
  await page.goto('/chat')
  await expect(page).toHaveURL(/\/chat/)
  expect(pluginCalls).toEqual([])
  await second.close()
  await page.goto('/conversations')
  await openCreate(page, '新建群聊')
  await expect(dialog.getByRole('button', { name: '信息收集团队', exact: true })).toBeDisabled()
  await dialog.getByRole('button', { name: '取消', exact: true }).click()
  await createAgent(page, '模板成员四')
  await createAgent(page, '模板成员五')
  await openCreate(page, '新建群聊')
  for (const name of ['信息收集团队', '产品设计团队', '软件开发团队', '文案书写团队', '项目管理团队', '数据分析团队', '会议协作团队', '运维保障团队']) {
    await expect(dialog.getByRole('button', { name, exact: true })).toBeEnabled()
  }
  await page.screenshot({ path: testInfo.outputPath('restored-team-presets.png'), fullPage: true })
  await dialog.getByRole('button', { name: '产品设计团队', exact: true }).click()
  await expect(dialog.getByRole('textbox', { name: '名称', exact: true })).toHaveValue('产品设计团队')
  await dialog.getByRole('combobox', { name: '产品负责人对应的 Agent', exact: true }).selectOption({ label: '产品经理' })
  await dialog.getByRole('combobox', { name: '交互设计对应的 Agent', exact: true }).selectOption({ label: '开发工程师' })
  const [submitted] = await Promise.all([
    page.waitForRequest(r => r.method() === 'POST' && r.url().endsWith('/api/app/conversations')),
    dialog.getByRole('button', { name: '保存', exact: true }).click(),
  ])
  const payload = submitted.postDataJSON()
  expect(new Set(payload.memberIds).size).toBe(5)
  expect(Object.keys(payload.memberRoles)).toHaveLength(5)
  expect(payload.memberRoles[payload.administratorId].name).toBe('产品负责人')
  await expect(page.getByRole('heading', { name: '产品设计团队', exact: true })).toBeVisible()
  await page.getByRole('button', { name: '聊天设置', exact: true }).click()
  await expect(dialog.getByText('产品经理 · 产品负责人', { exact: false })).toBeVisible()
  await expect(dialog.getByText('开发工程师 · 交互设计', { exact: false })).toBeVisible()
  await dialog.getByRole('button', { name: '取消', exact: true }).click()
  await page.getByPlaceholder('输入消息，Enter 发送，Shift + Enter 换行').fill('请汇总设计方案')
  await page.getByRole('button', { name: '发送消息', exact: true }).click()
  await expect(page.locator('.message--assistant')).toContainText('我是产品经理')
  const composer = page.getByPlaceholder('输入消息，Enter 发送，Shift + Enter 换行')
  await composer.fill('[hold-workspace] 正在执行的任务')
  await page.getByRole('button', { name: '发送消息', exact: true }).click()
  await expect(page.getByRole('button', { name: '停止生成', exact: true })).toBeVisible()
  await composer.fill('后续排队任务')
  await expect(page.getByRole('button', { name: '发送消息', exact: true })).toBeEnabled()
  await page.getByRole('button', { name: '发送消息', exact: true }).click()
  await expect(page.locator('.message--user').last()).toContainText('后续排队任务')
  const detail = await (await page.request.get(new URL(page.url()).pathname.replace('/conversations/', '/api/app/conversations/'))).json()
  expect(detail.conversation.queuedMessageCount).toBe(1)
  await page.request.post('http://127.0.0.1:19120/__release')
  await expect.poll(async () => (await (await page.request.get(`/api/app/conversations/${detail.conversation.id}`)).json()).conversation.activeRunId).toBeUndefined()
  await page.setViewportSize({ width: 390, height: 844 })
  await page.getByRole('button', { name: '返回 Bot 列表', exact: true }).click()
  await expect(rail).toBeVisible()
  await expect(rail).toHaveCSS('width', '390px')
  await expect(page.locator('.mobile-header')).toBeHidden()
  await expect(rail.locator('.sidebar-feature-nav')).toHaveCount(0)
  await page.screenshot({ path: testInfo.outputPath('mobile-bot-list.png') })
  await rail.getByRole('button', { name: '新建', exact: true }).click()
  await expect(page.getByRole('menuitem', { name: '新建 Bot', exact: true })).toBeVisible()
  await page.keyboard.press('Escape')
  await rail.getByRole('button', { name: '搜索', exact: true }).click()
  await expect(page.getByRole('dialog', { name: '搜索聊天' })).toBeVisible()
  await expect(page.getByRole('tab', { name: '未归档', exact: true })).toBeVisible()
  await page.getByRole('button', { name: '关闭搜索', exact: true }).click()
  await rail.locator('.sidebar-account-switcher__main').click()
  await page.getByRole('button', { name: '进入聊天模式', exact: true }).click()
  await expect(page).toHaveURL(/\/chat$/)
  await page.goto('/')
  await expect(page).toHaveURL(/\/chat$/)
  await page.setViewportSize({ width: 1280, height: 800 })
  await page.getByRole('button', { name: '设置与模式', exact: true }).click()
  await page.getByRole('menuitem', { name: '进入 Bot 模式', exact: true }).click()
  await page.goto('/')
  await expect(page).toHaveURL(/\/conversations$/)
  await page.reload()
  await expect(rail.locator('.bot-list-header')).toBeVisible()
  expect(pluginCalls).toEqual([])
})