@csntgao/uni-base 0.1.0

package/packages/web-components/tests/chat.test.ts

@@ -0,0 +1,1130 @@
+// @vitest-environment happy-dom
+
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import {
+  AiEmployeeTransportError,
+  type AiEmployeeMessage,
+  type AiEmployeeTransport,
+} from '@uniplat/ai-employee-client'
+import '../src'
+import type { UniplatAiEmployeeChat } from '../src'
+
+class ComponentFakeWebSocket {
+  readonly url: string
+  readyState = 0
+  sent: string[] = []
+  closeCount = 0
+  onopen: ((event: Event) => void) | null = null
+  onmessage: ((event: MessageEvent) => void) | null = null
+  onerror: ((event: Event) => void) | null = null
+  onclose: ((event: CloseEvent) => void) | null = null
+
+  constructor(url: string) {
+    this.url = url
+  }
+
+  open(): void {
+    this.readyState = 1
+    this.onopen?.(new Event('open'))
+  }
+
+  receive(payload: unknown): void {
+    this.onmessage?.(new MessageEvent('message', { data: JSON.stringify(payload) }))
+  }
+
+  send(payload: string): void {
+    this.sent.push(payload)
+  }
+
+  close(): void {
+    if (this.readyState >= 2) return
+    this.closeCount += 1
+    this.readyState = 3
+    this.onclose?.(new CloseEvent('close', { code: 1000 }))
+  }
+
+  asWebSocket(): WebSocket {
+    return this as unknown as WebSocket
+  }
+}
+
+function createTransport(history: AiEmployeeMessage[] = []) {
+  return {
+    createSessionWithFirstMessage: vi.fn(async () => ({
+      sessionId: 'atomic-session-default',
+      messageId: 'atomic-message-default',
+      executionId: 'atomic-execution-default',
+      status: 'running' as const,
+      startedAt: '2026-08-18T08:00:00.000Z',
+      aeCode: 'recruit',
+      agentCode: 'default',
+      conversationType: 'default',
+    })),
+    listMessages: vi.fn(async () => history),
+    sendMessage: vi.fn(async () => undefined),
+    getAccessToken: vi.fn(async () => 'component-secret-jwt'),
+  } satisfies AiEmployeeTransport
+}
+
+async function settle(element: UniplatAiEmployeeChat): Promise<void> {
+  await Promise.resolve()
+  await element.updateComplete
+  await Promise.resolve()
+}
+
+async function authenticateAndReadyComponent(socket: ComponentFakeWebSocket): Promise<void> {
+  socket.open()
+  await Promise.resolve()
+  socket.receive({
+    type: 'realtime_ready',
+    channels: { ai_employee: { available: true } },
+    heartbeat_interval_seconds: 25,
+  })
+}
+
+function deferred<T>() {
+  let resolve!: (value: T | PromiseLike<T>) => void
+  let reject!: (reason?: unknown) => void
+  const promise = new Promise<T>((promiseResolve, promiseReject) => {
+    resolve = promiseResolve
+    reject = promiseReject
+  })
+  return { promise, resolve, reject }
+}
+
+describe('<uniplat-ai-employee-chat>', () => {
+  afterEach(() => {
+    document.body.replaceChildren()
+    vi.unstubAllGlobals()
+  })
+
+  it('loads, sends, receives once, emits safe events and destroys its client', async () => {
+    const sockets: ComponentFakeWebSocket[] = []
+    const transport = createTransport()
+    const chat = document.createElement('uniplat-ai-employee-chat')
+    const eventDetails: unknown[] = []
+    for (const type of [
+      'ready',
+      'message-sent',
+      'message-received',
+      'connection-state-change',
+      'error',
+    ]) {
+      chat.addEventListener(type, (event) => eventDetails.push((event as CustomEvent).detail))
+    }
+
+    chat.configure({
+      realtimeUrl: 'wss://kanban.example.com/api/user-realtime/ws',
+      aeCode: 'recruit',
+      agentCode: 'default',
+      sessionId: 'session-1',
+      transport,
+      minimumHeartbeatMs: 60_000,
+      webSocketFactory: (url) => {
+        const socket = new ComponentFakeWebSocket(url)
+        sockets.push(socket)
+        return socket.asWebSocket()
+      },
+    })
+    document.body.append(chat)
+    await settle(chat)
+    expect(sockets).toHaveLength(0)
+    expect(chat.shadowRoot?.querySelector('[role="dialog"]')).toBeNull()
+
+    chat.open()
+    await settle(chat)
+    expect(sockets).toHaveLength(1)
+    expect(chat.shadowRoot?.textContent).toContain('企业服务AI顾问')
+    expect(chat.shadowRoot?.textContent).toContain('7×24 小时在线，任何问题都可以问我')
+    expect(chat.shadowRoot?.querySelector('[data-prototype-icon="messages"]')).toBeTruthy()
+    expect(
+      chat.shadowRoot?.querySelector('.advisor-mark [data-prototype-icon="robot"]'),
+    ).toBeTruthy()
+    expect(chat.shadowRoot?.textContent).toContain('开始和AI客服对话吧')
+
+    sockets[0]?.open()
+    await settle(chat)
+    sockets[0]?.receive({
+      type: 'realtime_ready',
+      channels: { ai_employee: { available: true } },
+      heartbeat_interval_seconds: 25,
+    })
+    await settle(chat)
+
+    const input = chat.shadowRoot?.querySelector('input')
+    const button = chat.shadowRoot?.querySelector<HTMLButtonElement>('.send-button')
+    expect(input).toBeTruthy()
+    expect(button).toBeTruthy()
+    input!.value = '  帮我筛选候选人  '
+    input!.dispatchEvent(new InputEvent('input', { bubbles: true }))
+    await chat.updateComplete
+    button!.click()
+    await settle(chat)
+
+    expect(transport.sendMessage).toHaveBeenCalledWith('session-1', '帮我筛选候选人')
+    expect(chat.shadowRoot?.textContent).toContain('帮我筛选候选人')
+    const userMessage = chat.shadowRoot?.querySelector<HTMLElement>('.message.user')
+    const userMessageRow = chat.shadowRoot?.querySelector<HTMLElement>('.message-row.user')
+    expect(userMessage).toBeTruthy()
+    expect(userMessageRow).toBeTruthy()
+    expect(userMessage?.textContent).toBe('帮我筛选候选人')
+    expect(getComputedStyle(userMessage!).width).toBe('fit-content')
+    expect(getComputedStyle(userMessage!).minWidth).toBe('0')
+    expect(getComputedStyle(userMessageRow!).alignItems).toBe('flex-start')
+
+    const reply = {
+      type: 'realtime_event',
+      channel: 'ai_employee',
+      event: {
+        type: 'session_message',
+        session_id: 'session-1',
+        payload: {
+          JsonPatch: [
+            {
+              path: '/0',
+              value: {
+                ws_message_id: 'reply-1',
+                entry_type: { type: 'assistant_message' },
+                content: JSON.stringify({ text: '已找到三位候选人。' }),
+              },
+            },
+          ],
+        },
+      },
+    }
+    sockets[0]?.receive(reply)
+    sockets[0]?.receive(reply)
+    await settle(chat)
+
+    expect(chat.shadowRoot?.querySelectorAll('[data-message-id="reply-1"]')).toHaveLength(1)
+    expect(eventDetails.some((detail) => JSON.stringify(detail).includes('已找到三位候选人'))).toBe(
+      true,
+    )
+    expect(chat.outerHTML).not.toContain('component-secret-jwt')
+    expect(JSON.stringify(eventDetails)).not.toContain('component-secret-jwt')
+    expect(sockets[0]?.url).not.toContain('component-secret-jwt')
+
+    chat.shadowRoot?.querySelector<HTMLButtonElement>('.close-button')?.click()
+    await settle(chat)
+    expect(sockets[0]?.closeCount).toBe(1)
+    expect(chat.shadowRoot?.querySelector('[role="dialog"]')).toBeNull()
+    chat.remove()
+  })
+
+  it('renders assistant replies as safe Markdown while keeping user messages as plain text', async () => {
+    const history: AiEmployeeMessage[] = [
+      {
+        id: 'user-markdown',
+        sessionId: 'session-1',
+        role: 'user',
+        content: '**用户原文**',
+        createdAt: '2026-08-21T08:00:00.000Z',
+      },
+      {
+        id: 'assistant-markdown',
+        sessionId: 'session-1',
+        role: 'assistant',
+        content:
+          '# 建议\n\n**重点内容**与 `代码`\n\n- 第一项\n- 第二项\n\n[安全链接](https://example.com/guide)\n\n<script>alert(1)</script> [危险链接](javascript:alert(2))',
+        createdAt: '2026-08-21T08:00:01.000Z',
+      },
+    ]
+    const chat = document.createElement('uniplat-ai-employee-chat')
+    chat.configure({
+      realtimeUrl: 'wss://kanban.example.com/api/user-realtime/ws',
+      aeCode: 'recruit',
+      agentCode: 'default',
+      sessionId: 'session-1',
+      transport: createTransport(history),
+      webSocketFactory: () => new ComponentFakeWebSocket('wss://kanban.example.com').asWebSocket(),
+    })
+    document.body.append(chat)
+    chat.open()
+    await vi.waitFor(() =>
+      expect(chat.shadowRoot?.querySelector('[data-message-id="assistant-markdown"]')).toBeTruthy(),
+    )
+    await settle(chat)
+
+    const assistant = chat.shadowRoot?.querySelector<HTMLElement>(
+      '[data-message-id="assistant-markdown"]',
+    )
+    expect(assistant?.querySelector('h1')?.textContent).toBe('建议')
+    expect(assistant?.querySelector('strong')?.textContent).toBe('重点内容')
+    expect(assistant?.querySelector('code')?.textContent).toBe('代码')
+    expect(assistant?.querySelectorAll('li')).toHaveLength(2)
+    const links = assistant?.querySelectorAll<HTMLAnchorElement>('a') ?? []
+    expect(links).toHaveLength(1)
+    expect(links[0]?.href).toBe('https://example.com/guide')
+    expect(links[0]?.target).toBe('_blank')
+    expect(links[0]?.rel).toBe('noopener noreferrer')
+    expect(assistant?.querySelector('script')).toBeNull()
+    expect(assistant?.innerHTML ?? '').toContain('&lt;script&gt;')
+
+    const user = chat.shadowRoot?.querySelector<HTMLElement>('[data-message-id="user-markdown"]')
+    expect(user?.textContent).toBe('**用户原文**')
+    expect(user?.querySelector('strong')).toBeNull()
+  })
+
+  it('uses an anonymous JWT transparently and renders a safe throttling error once', async () => {
+    const anonymousToken = 'anonymous.component.jwt'
+    const sockets: ComponentFakeWebSocket[] = []
+    const transport = createTransport()
+    transport.getAccessToken.mockResolvedValue(anonymousToken)
+    transport.sendMessage.mockRejectedValueOnce(
+      Object.assign(new AiEmployeeTransportError('TOO_MANY_REQUESTS'), {
+        unsafeResponse: 'anonymous-user-31 backend trace',
+      }),
+    )
+    const chat = document.createElement('uniplat-ai-employee-chat')
+    const errors: unknown[] = []
+    chat.addEventListener('error', (event) =>
+      errors.push((event as unknown as CustomEvent<unknown>).detail),
+    )
+    chat.configure({
+      realtimeUrl: 'wss://kanban.example.com/api/user-realtime/ws',
+      aeCode: 'recruit',
+      agentCode: 'default',
+      sessionId: 'session-1',
+      transport,
+      webSocketFactory: (url) => {
+        const socket = new ComponentFakeWebSocket(url)
+        sockets.push(socket)
+        return socket.asWebSocket()
+      },
+    })
+    document.body.append(chat)
+    chat.open()
+    await settle(chat)
+    sockets[0]?.open()
+    await Promise.resolve()
+    sockets[0]?.receive({
+      type: 'realtime_ready',
+      principal_type: 'anonymous_user',
+      scope: { anonymous_user_id: 'anonymous-user-31' },
+      channels: { ai_employee: { available: true } },
+      heartbeat_interval_seconds: 25,
+    })
+    await settle(chat)
+
+    const input = chat.shadowRoot?.querySelector('input')
+    input!.value = '咨询匿名服务'
+    input!.dispatchEvent(new InputEvent('input', { bubbles: true }))
+    await chat.updateComplete
+    chat.shadowRoot?.querySelector<HTMLButtonElement>('.send-button')?.click()
+    await vi.waitFor(() => expect(transport.sendMessage).toHaveBeenCalledTimes(1))
+    await settle(chat)
+
+    expect(errors).toEqual([
+      {
+        code: 'RATE_LIMITED',
+        message: '请求过于频繁，请稍后再试。',
+        recoverable: false,
+      },
+    ])
+    expect(chat.shadowRoot?.textContent).toContain('请求过于频繁，请稍后再试。')
+    expect(chat.outerHTML).not.toContain(anonymousToken)
+    expect(chat.outerHTML).not.toContain('anonymous-user-31')
+    expect(JSON.stringify(errors)).not.toContain(anonymousToken)
+    expect(JSON.stringify(errors)).not.toContain('anonymous-user-31')
+    expect(JSON.stringify(errors)).not.toContain('backend trace')
+  })
+
+  it('does not send blank content', async () => {
+    const sockets: ComponentFakeWebSocket[] = []
+    const transport = createTransport()
+    const chat = document.createElement('uniplat-ai-employee-chat')
+    chat.configure({
+      realtimeUrl: 'wss://kanban.example.com/api/user-realtime/ws',
+      aeCode: 'recruit',
+      agentCode: 'default',
+      sessionId: 'session-1',
+      transport,
+      webSocketFactory: (url) => {
+        const socket = new ComponentFakeWebSocket(url)
+        sockets.push(socket)
+        return socket.asWebSocket()
+      },
+    })
+    document.body.append(chat)
+    chat.open()
+    await settle(chat)
+
+    const input = chat.shadowRoot?.querySelector('input')
+    input!.value = '   '
+    input!.dispatchEvent(new InputEvent('input', { bubbles: true }))
+    await chat.updateComplete
+    expect(chat.shadowRoot?.querySelector<HTMLButtonElement>('.send-button')?.disabled).toBe(true)
+    expect(transport.sendMessage).not.toHaveBeenCalled()
+  })
+
+  it('sends a non-empty open argument as the atomic first message and preserves blank behavior', async () => {
+    const transport = createTransport()
+    const chat = document.createElement('uniplat-ai-employee-chat')
+    chat.configure({
+      realtimeUrl: 'wss://kanban.example.com/api/user-realtime/ws',
+      aeCode: 'recruit',
+      agentCode: 'default',
+      transport,
+      requestIdFactory: () => 'c7181ccb-2ff7-4de9-8229-c0ab61c257ef',
+      webSocketFactory: () => new ComponentFakeWebSocket('wss://kanban.example.com').asWebSocket(),
+    })
+    document.body.append(chat)
+
+    chat.open('  我想咨询用工合规解决方案  ')
+    await vi.waitFor(() => expect(transport.createSessionWithFirstMessage).toHaveBeenCalledTimes(1))
+    await settle(chat)
+
+    expect(transport.createSessionWithFirstMessage).toHaveBeenCalledWith({
+      requestId: 'c7181ccb-2ff7-4de9-8229-c0ab61c257ef',
+      aeCode: 'recruit',
+      agentCode: 'default',
+      content: '我想咨询用工合规解决方案',
+      attachments: [],
+      trustedContext: null,
+    })
+    expect(transport.sendMessage).not.toHaveBeenCalled()
+    expect(chat.shadowRoot?.textContent).toContain('我想咨询用工合规解决方案')
+
+    chat.close()
+    chat.open('   ')
+    await settle(chat)
+    expect(transport.createSessionWithFirstMessage).toHaveBeenCalledTimes(1)
+  })
+
+  it('sends a non-empty open argument as a follow-up when an existing session is configured', async () => {
+    const transport = createTransport()
+    const chat = document.createElement('uniplat-ai-employee-chat')
+    chat.configure({
+      realtimeUrl: 'wss://kanban.example.com/api/user-realtime/ws',
+      aeCode: 'recruit',
+      agentCode: 'default',
+      sessionId: 'existing-session',
+      transport,
+      webSocketFactory: () => new ComponentFakeWebSocket('wss://kanban.example.com').asWebSocket(),
+    })
+    document.body.append(chat)
+
+    chat.open('  继续咨询招聘方案  ')
+    await vi.waitFor(() => expect(transport.sendMessage).toHaveBeenCalledTimes(1))
+    await settle(chat)
+
+    expect(transport.sendMessage).toHaveBeenCalledWith('existing-session', '继续咨询招聘方案')
+    expect(transport.createSessionWithFirstMessage).not.toHaveBeenCalled()
+    expect(chat.shadowRoot?.textContent).toContain('继续咨询招聘方案')
+  })
+
+  it('owns the drawer lifecycle and switches to the customer support component', async () => {
+    const sockets: ComponentFakeWebSocket[] = []
+    const transport = createTransport()
+    const customerSupportFetch = vi.fn(
+      async (input: string | URL | Request, init?: RequestInit) => {
+        void input
+        void init
+        return new Response(JSON.stringify({ rescode: 0, data: { list: [] } }), {
+          status: 200,
+          headers: { 'content-type': 'application/json' },
+        })
+      },
+    )
+    vi.stubGlobal('fetch', customerSupportFetch)
+    const chat = document.createElement('uniplat-ai-employee-chat')
+    chat.configure({
+      realtimeUrl: 'wss://kanban.example.com/api/user-realtime/ws',
+      aeCode: 'recruit',
+      agentCode: 'default',
+      sessionId: 'session-1',
+      transport,
+      webSocketFactory: (url) => {
+        const socket = new ComponentFakeWebSocket(url)
+        sockets.push(socket)
+        return socket.asWebSocket()
+      },
+    })
+    document.body.append(chat)
+    chat.open()
+    await settle(chat)
+    sockets[0]?.open()
+    sockets[0]?.receive({
+      type: 'realtime_ready',
+      channels: { ai_employee: { available: true } },
+      heartbeat_interval_seconds: 25,
+    })
+    await settle(chat)
+
+    chat.shadowRoot?.querySelector<HTMLButtonElement>('.human-service-button')?.click()
+    await settle(chat)
+    await vi.waitFor(() => expect(customerSupportFetch).toHaveBeenCalledTimes(1))
+    const customerSupport = chat.shadowRoot?.querySelector('uniplat-customer-support-chat')
+    expect(customerSupport).toBeTruthy()
+    expect(customerSupport?.shadowRoot?.textContent).toContain('企业客服人工顾问')
+    expect(transport.sendMessage).not.toHaveBeenCalledWith('session-1', '请帮我转接人工顾问')
+    expect(String(customerSupportFetch.mock.calls[0]?.[0])).toContain(
+      '/api/general/project/hr_saas/service/customer_support_api/user_session_page',
+    )
+    expect(new Headers(customerSupportFetch.mock.calls[0]?.[1]?.headers).get('authorization')).toBe(
+      'Bearer component-secret-jwt',
+    )
+    expect(sockets[0]?.closeCount).toBe(1)
+
+    customerSupport?.shadowRoot?.querySelector<HTMLButtonElement>('.ai-service-button')?.click()
+    await settle(chat)
+    await vi.waitFor(() => expect(sockets.length).toBeGreaterThanOrEqual(2))
+    expect(chat.shadowRoot?.querySelector('uniplat-customer-support-chat')).toBeNull()
+    expect(chat.shadowRoot?.textContent).toContain('企业服务AI顾问')
+    const restoredAiSocket = sockets.at(-1)
+    restoredAiSocket?.open()
+    await Promise.resolve()
+    expect(JSON.parse(restoredAiSocket?.sent[0] ?? '{}')).toMatchObject({
+      type: 'authenticate',
+      requested_channels: ['ai_employee'],
+    })
+
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+    await settle(chat)
+    expect(chat.shadowRoot?.querySelector('uniplat-customer-support-chat')).toBeNull()
+  })
+
+  it('opens the prototype conversation list and switches sessions inside the component', async () => {
+    const sockets: ComponentFakeWebSocket[] = []
+    const sessionTwoHistory: AiEmployeeMessage[] = [
+      {
+        id: '102',
+        sessionId: 'session-2',
+        role: 'assistant',
+        content: '资料齐全的话，明天可以提交。',
+        createdAt: '2026-08-14T01:00:00.000Z',
+      },
+    ]
+    const baseTransport = createTransport()
+    const transport = {
+      ...baseTransport,
+      listMessages: vi.fn(async (sessionId: string) =>
+        sessionId === 'session-2' ? sessionTwoHistory : [],
+      ),
+      listSessions: vi.fn(async () => [
+        {
+          sessionId: 'session-1',
+          title: '企业服务顾问',
+          latestMessage: '可以。异地没有主体时，通常用…',
+          latestMessageId: '101',
+          updatedAt: new Date().toISOString(),
+          unreadCount: 0,
+        },
+        {
+          sessionId: 'session-2',
+          title: '异地用工服务咨询',
+          latestMessage: '资料齐全的话，明天可以提交…',
+          latestMessageId: '102',
+          updatedAt: '2026-08-14T01:00:00.000Z',
+          unreadCount: 2,
+        },
+      ]),
+      markSessionRead: vi.fn(async () => undefined),
+    } satisfies AiEmployeeTransport
+    const chat = document.createElement('uniplat-ai-employee-chat')
+    chat.configure({
+      realtimeUrl: 'wss://kanban.example.com/api/user-realtime/ws',
+      aeCode: 'recruit',
+      agentCode: 'default',
+      sessionId: 'session-1',
+      transport,
+      webSocketFactory: (url) => {
+        const socket = new ComponentFakeWebSocket(url)
+        sockets.push(socket)
+        return socket.asWebSocket()
+      },
+    })
+    document.body.append(chat)
+    chat.open()
+    await settle(chat)
+
+    chat.shadowRoot?.querySelector<HTMLButtonElement>('.conversation-mark')?.click()
+    await vi.waitFor(() => expect(transport.listSessions).toHaveBeenCalledTimes(1))
+    await settle(chat)
+
+    expect(chat.shadowRoot?.textContent).toContain('我的会话')
+    expect(chat.shadowRoot?.textContent).toContain('异地用工服务咨询')
+    expect(chat.shadowRoot?.querySelectorAll('.session-item')).toHaveLength(2)
+    expect(chat.shadowRoot?.querySelector('[data-prototype-icon="arrow-left"]')).toBeTruthy()
+
+    const sessionItems = chat.shadowRoot?.querySelectorAll<HTMLButtonElement>('.session-item')
+    sessionItems?.[1]?.click()
+    await vi.waitFor(() => expect(transport.listMessages).toHaveBeenCalledWith('session-2'))
+    await settle(chat)
+
+    expect(sockets).toHaveLength(2)
+    expect(chat.shadowRoot?.textContent).not.toContain('我的会话')
+    expect(chat.shadowRoot?.textContent).toContain('企业服务AI顾问')
+    expect(chat.shadowRoot?.textContent).toContain('资料齐全的话，明天可以提交。')
+    expect(transport.markSessionRead).toHaveBeenCalledWith('session-2', '102')
+    expect(chat.outerHTML).not.toContain('session-2')
+  })
+
+  it('creates a new conversation from the conversation-list header', async () => {
+    const sockets: ComponentFakeWebSocket[] = []
+    const transport = {
+      ...createTransport(),
+      listSessions: vi.fn(async () => [
+        {
+          sessionId: 'session-1',
+          title: '既有会话',
+          latestMessage: '既有消息',
+          updatedAt: '2026-08-15T01:00:00.000Z',
+          unreadCount: 0,
+        },
+      ]),
+      listMessages: vi.fn(async () => []),
+    } satisfies AiEmployeeTransport
+    const chat = document.createElement('uniplat-ai-employee-chat')
+    chat.configure({
+      realtimeUrl: 'wss://kanban.example.com/api/user-realtime/ws',
+      aeCode: 'recruit',
+      agentCode: 'default',
+      sessionId: 'session-1',
+      transport,
+      webSocketFactory: (url) => {
+        const socket = new ComponentFakeWebSocket(url)
+        sockets.push(socket)
+        return socket.asWebSocket()
+      },
+    })
+    document.body.append(chat)
+    chat.open()
+    await settle(chat)
+
+    chat.shadowRoot?.querySelector<HTMLButtonElement>('.conversation-mark')?.click()
+    await vi.waitFor(() => expect(transport.listSessions).toHaveBeenCalledTimes(1))
+    await settle(chat)
+
+    const newButton = chat.shadowRoot?.querySelector<HTMLButtonElement>('.session-new-button')
+    expect(newButton?.getAttribute('aria-label')).toBe('开启新对话')
+    expect(newButton?.querySelector('[data-prototype-icon="plus"]')).toBeTruthy()
+    newButton?.click()
+    await vi.waitFor(() => expect(chat.shadowRoot?.querySelector('.session-new-button')).toBeNull())
+    await settle(chat)
+
+    expect(transport.createSessionWithFirstMessage).not.toHaveBeenCalled()
+    expect(sockets).toHaveLength(2)
+    expect(chat.shadowRoot?.textContent).not.toContain('我的会话')
+    expect(chat.shadowRoot?.textContent).toContain('企业服务AI顾问')
+  })
+
+  it('keeps an atomic new conversation local and creates it only with the first message', async () => {
+    const transport = {
+      ...createTransport(),
+      createSessionWithFirstMessage: vi.fn(async () => ({
+        sessionId: 'atomic-session-component',
+        messageId: 'atomic-message-component',
+        executionId: 'atomic-execution-component',
+        status: 'running' as const,
+        startedAt: '2026-08-18T08:45:00.000Z',
+        aeCode: 'recruit',
+        agentCode: 'default',
+        conversationType: 'default',
+      })),
+      listSessions: vi.fn(async () => []),
+    } satisfies AiEmployeeTransport
+    const chat = document.createElement('uniplat-ai-employee-chat')
+    const sentEvents: unknown[] = []
+    chat.addEventListener('message-sent', (event) =>
+      sentEvents.push((event as CustomEvent<unknown>).detail),
+    )
+    chat.configure({
+      realtimeUrl: 'wss://kanban.example.com/api/user-realtime/ws',
+      aeCode: 'recruit',
+      agentCode: 'default',
+      transport,
+      requestIdFactory: () => '6afdb617-5997-46cf-aef1-f043c22c32de',
+      webSocketFactory: () => new ComponentFakeWebSocket('wss://kanban.example.com').asWebSocket(),
+    })
+    document.body.append(chat)
+    chat.open()
+    await settle(chat)
+
+    expect(transport.createSessionWithFirstMessage).not.toHaveBeenCalled()
+
+    chat.shadowRoot?.querySelector<HTMLButtonElement>('.conversation-mark')?.click()
+    await vi.waitFor(() => expect(transport.listSessions).toHaveBeenCalledTimes(1))
+    await settle(chat)
+    chat.shadowRoot?.querySelector<HTMLButtonElement>('.session-new-button')?.click()
+    await vi.waitFor(() => expect(chat.shadowRoot?.querySelector('.session-new-button')).toBeNull())
+
+    expect(transport.createSessionWithFirstMessage).not.toHaveBeenCalled()
+
+    const input = chat.shadowRoot?.querySelector<HTMLInputElement>('input[part="input"]')
+    input!.value = '首条消息原子创建会话'
+    input?.dispatchEvent(new InputEvent('input', { bubbles: true }))
+    chat.shadowRoot?.querySelector<HTMLFormElement>('.composer')?.requestSubmit()
+    await vi.waitFor(() => expect(transport.createSessionWithFirstMessage).toHaveBeenCalledTimes(1))
+    await settle(chat)
+
+    expect(transport.createSessionWithFirstMessage).toHaveBeenCalledWith({
+      requestId: '6afdb617-5997-46cf-aef1-f043c22c32de',
+      aeCode: 'recruit',
+      agentCode: 'default',
+      content: '首条消息原子创建会话',
+      attachments: [],
+      trustedContext: null,
+    })
+    expect(transport.sendMessage).not.toHaveBeenCalled()
+    expect(chat.shadowRoot?.textContent).toContain('首条消息原子创建会话')
+    expect(JSON.stringify(sentEvents)).not.toContain('requestId')
+    expect(JSON.stringify(sentEvents)).not.toContain('atomic-execution-component')
+    expect(chat.outerHTML).not.toContain('atomic-session-component')
+  })
+
+  it('updates the open conversation list when realtime supplies a title', async () => {
+    const sockets: ComponentFakeWebSocket[] = []
+    const transport = {
+      ...createTransport(),
+      listSessions: vi.fn(async () => [
+        {
+          sessionId: 'session-1',
+          title: '新对话',
+          latestMessage: '上海员工如何缴社保？',
+          updatedAt: '2026-08-15T01:00:00.000Z',
+          unreadCount: 0,
+        },
+      ]),
+    } satisfies AiEmployeeTransport
+    const chat = document.createElement('uniplat-ai-employee-chat')
+    chat.configure({
+      realtimeUrl: 'wss://kanban.example.com/api/user-realtime/ws',
+      aeCode: 'recruit',
+      agentCode: 'default',
+      sessionId: 'session-1',
+      transport,
+      webSocketFactory: (url) => {
+        const socket = new ComponentFakeWebSocket(url)
+        sockets.push(socket)
+        return socket.asWebSocket()
+      },
+    })
+    document.body.append(chat)
+    chat.open()
+    await settle(chat)
+    await authenticateAndReadyComponent(sockets[0]!)
+
+    chat.shadowRoot?.querySelector<HTMLButtonElement>('.conversation-mark')?.click()
+    await vi.waitFor(() => expect(transport.listSessions).toHaveBeenCalledTimes(1))
+    await settle(chat)
+    expect(chat.shadowRoot?.querySelector('.session-item-title')?.textContent).toBe(
+      '上海员工如何缴社保？',
+    )
+    expect(chat.shadowRoot?.querySelector('.session-item-title')?.textContent).not.toBe('新对话')
+    sockets[0]?.receive({
+      type: 'realtime_event',
+      channel: 'ai_employee',
+      event: {
+        type: 'session_title_updated',
+        session_id: 'session-1',
+        payload: { title: '上海异地员工社保办理' },
+      },
+    })
+    await settle(chat)
+
+    expect(chat.shadowRoot?.textContent).toContain('上海异地员工社保办理')
+    expect(chat.shadowRoot?.textContent).not.toContain('新对话')
+  })
+
+  it('treats the visible current conversation as read before Host synchronization finishes', async () => {
+    const completion = deferred<void>()
+    const latestMessageAt = '2026-08-18T07:00:00.000Z'
+    const currentHistory: AiEmployeeMessage[] = [
+      {
+        id: 'history-201',
+        sessionId: 'session-1',
+        role: 'assistant',
+        content: '等待阅读的回复',
+        createdAt: latestMessageAt,
+      },
+    ]
+    const transport = {
+      ...createTransport(currentHistory),
+      listSessions: vi.fn(async () => [
+        {
+          sessionId: 'session-1',
+          title: '企业服务顾问',
+          latestMessage: '等待阅读的回复',
+          latestMessageId: 'list-201',
+          updatedAt: '2026-08-18T07:00:01.000Z',
+          unreadCount: 1,
+        },
+      ]),
+      markSessionRead: vi.fn(() => completion.promise),
+    } satisfies AiEmployeeTransport
+    const chat = document.createElement('uniplat-ai-employee-chat')
+    chat.configure({
+      realtimeUrl: 'wss://kanban.example.com/api/user-realtime/ws',
+      aeCode: 'recruit',
+      agentCode: 'default',
+      sessionId: 'session-1',
+      transport,
+      webSocketFactory: () => new ComponentFakeWebSocket('wss://kanban.example.com').asWebSocket(),
+    })
+    document.body.append(chat)
+    chat.open()
+    await vi.waitFor(() =>
+      expect(transport.markSessionRead).toHaveBeenCalledWith('session-1', 'history-201'),
+    )
+
+    chat.shadowRoot?.querySelector<HTMLButtonElement>('.conversation-mark')?.click()
+    await vi.waitFor(() => expect(transport.listSessions).toHaveBeenCalledTimes(1))
+    await settle(chat)
+    expect(chat.shadowRoot?.querySelector('.session-item-unread')).toBeNull()
+
+    completion.resolve()
+    await vi.waitFor(() =>
+      expect(transport.markSessionRead).toHaveBeenCalledWith('session-1', 'list-201'),
+    )
+
+    chat.shadowRoot?.querySelector<HTMLButtonElement>('.session-back-button')?.click()
+    await settle(chat)
+    expect(chat.shadowRoot?.querySelector('.conversation-unread')).toBeNull()
+  })
+
+  it('keeps the visible current conversation locally read and retries a failed Host update', async () => {
+    const currentHistory: AiEmployeeMessage[] = [
+      {
+        id: '202',
+        sessionId: 'session-1',
+        role: 'assistant',
+        content: '尚未同步已读的回复',
+        createdAt: new Date().toISOString(),
+      },
+    ]
+    const transport = {
+      ...createTransport(currentHistory),
+      listSessions: vi.fn(async () => [
+        {
+          sessionId: 'session-1',
+          title: '企业服务顾问',
+          latestMessage: '尚未同步已读的回复',
+          latestMessageId: '202',
+          updatedAt: new Date().toISOString(),
+          unreadCount: 1,
+        },
+      ]),
+      markSessionRead: vi.fn(async () => {
+        throw new Error('unsafe read response')
+      }),
+    } satisfies AiEmployeeTransport
+    const chat = document.createElement('uniplat-ai-employee-chat')
+    const errors: unknown[] = []
+    chat.addEventListener('error', (event) =>
+      errors.push((event as unknown as CustomEvent<unknown>).detail),
+    )
+    chat.configure({
+      realtimeUrl: 'wss://kanban.example.com/api/user-realtime/ws',
+      aeCode: 'recruit',
+      agentCode: 'default',
+      sessionId: 'session-1',
+      transport,
+      webSocketFactory: () => new ComponentFakeWebSocket('wss://kanban.example.com').asWebSocket(),
+    })
+    document.body.append(chat)
+    chat.open()
+    await vi.waitFor(() =>
+      expect(transport.markSessionRead).toHaveBeenCalledWith('session-1', '202'),
+    )
+
+    chat.shadowRoot?.querySelector<HTMLButtonElement>('.conversation-mark')?.click()
+    await vi.waitFor(() => expect(transport.listSessions).toHaveBeenCalledTimes(1))
+    await settle(chat)
+    expect(chat.shadowRoot?.querySelector('.session-item-unread')).toBeNull()
+
+    chat.shadowRoot?.querySelector<HTMLButtonElement>('.session-back-button')?.click()
+    await vi.waitFor(() => expect(transport.markSessionRead.mock.calls.length).toBeGreaterThan(1))
+    await settle(chat)
+
+    expect(chat.shadowRoot?.querySelector('.conversation-unread')).toBeNull()
+    expect(JSON.stringify(errors)).not.toContain('unsafe read response')
+  })
+
+  it('keeps the selected current session badge hidden and serializes its later read update', async () => {
+    const completion = deferred<void>()
+    const currentHistory: AiEmployeeMessage[] = [
+      {
+        id: '203',
+        sessionId: 'session-1',
+        role: 'assistant',
+        content: '第一条未读回复',
+        createdAt: '2026-08-15T01:00:00.000Z',
+      },
+    ]
+    const sockets: ComponentFakeWebSocket[] = []
+    const transport = {
+      ...createTransport(currentHistory),
+      listSessions: vi.fn(async () => [
+        {
+          sessionId: 'session-1',
+          title: '企业服务顾问',
+          latestMessage: '第一条未读回复',
+          latestMessageId: '203',
+          updatedAt: '2026-08-15T01:00:00.000Z',
+          unreadCount: 1,
+        },
+      ]),
+      markSessionRead: vi.fn(() => completion.promise),
+    } satisfies AiEmployeeTransport
+    const chat = document.createElement('uniplat-ai-employee-chat')
+    chat.configure({
+      realtimeUrl: 'wss://kanban.example.com/api/user-realtime/ws',
+      aeCode: 'recruit',
+      agentCode: 'default',
+      sessionId: 'session-1',
+      transport,
+      webSocketFactory: (url) => {
+        const socket = new ComponentFakeWebSocket(url)
+        sockets.push(socket)
+        return socket.asWebSocket()
+      },
+    })
+    document.body.append(chat)
+    chat.open()
+    await vi.waitFor(() =>
+      expect(transport.markSessionRead).toHaveBeenCalledWith('session-1', '203'),
+    )
+    await authenticateAndReadyComponent(sockets[0]!)
+
+    chat.shadowRoot?.querySelector<HTMLButtonElement>('.conversation-mark')?.click()
+    await vi.waitFor(() => expect(transport.listSessions).toHaveBeenCalledTimes(1))
+    await settle(chat)
+    expect(chat.shadowRoot?.querySelector('.session-item-unread')).toBeNull()
+
+    sockets[0]?.receive({
+      type: 'realtime_event',
+      channel: 'ai_employee',
+      event: {
+        type: 'session_message',
+        session_id: 'session-1',
+        payload: {
+          JsonPatch: [
+            {
+              path: '/0',
+              value: {
+                ws_message_id: '204',
+                entry_type: { type: 'assistant_message' },
+                content: JSON.stringify({ text: '后来到达的未读回复' }),
+                create_time: '2026-08-15T01:01:00.000Z',
+              },
+            },
+          ],
+        },
+      },
+    })
+    await settle(chat)
+    expect(chat.shadowRoot?.querySelector('.session-item-unread')).toBeNull()
+
+    completion.resolve()
+    await vi.waitFor(() => expect(transport.markSessionRead).toHaveBeenCalledTimes(1))
+    expect(chat.shadowRoot?.querySelector('.session-item-unread')).toBeNull()
+
+    chat.shadowRoot?.querySelector<HTMLButtonElement>('.session-item')?.click()
+    await vi.waitFor(() =>
+      expect(transport.markSessionRead).toHaveBeenCalledWith('session-1', '204'),
+    )
+    await settle(chat)
+    expect(chat.shadowRoot?.querySelector('.conversation-unread')).toBeNull()
+  })
+
+  it('excludes the visible current conversation from the aggregate unread badge', async () => {
+    const currentHistory: AiEmployeeMessage[] = [
+      {
+        id: '301',
+        sessionId: 'session-1',
+        role: 'assistant',
+        content: '当前会话回复',
+        createdAt: '2026-08-15T01:00:00.000Z',
+      },
+    ]
+    const transport = {
+      ...createTransport(currentHistory),
+      listSessions: vi.fn(async () => [
+        {
+          sessionId: 'session-1',
+          title: '当前会话',
+          latestMessage: '当前会话回复',
+          latestMessageId: '301',
+          updatedAt: '2026-08-15T01:00:00.000Z',
+          unreadCount: 1,
+        },
+        {
+          sessionId: 'session-2',
+          title: '其他会话',
+          latestMessage: '其他会话回复',
+          latestMessageId: '302',
+          updatedAt: '2026-08-15T01:01:00.000Z',
+          unreadCount: 2,
+        },
+      ]),
+      markSessionRead: vi.fn(async () => undefined),
+    } satisfies AiEmployeeTransport
+    const chat = document.createElement('uniplat-ai-employee-chat')
+    chat.configure({
+      realtimeUrl: 'wss://kanban.example.com/api/user-realtime/ws',
+      aeCode: 'recruit',
+      agentCode: 'default',
+      sessionId: 'session-1',
+      transport,
+      webSocketFactory: () => new ComponentFakeWebSocket('wss://kanban.example.com').asWebSocket(),
+    })
+    document.body.append(chat)
+    chat.open()
+    await vi.waitFor(() =>
+      expect(transport.markSessionRead).toHaveBeenCalledWith('session-1', '301'),
+    )
+
+    chat.shadowRoot?.querySelector<HTMLButtonElement>('.conversation-mark')?.click()
+    await vi.waitFor(() => expect(transport.listSessions).toHaveBeenCalledTimes(1))
+    chat.shadowRoot?.querySelector<HTMLButtonElement>('.session-back-button')?.click()
+    await settle(chat)
+
+    expect(chat.shadowRoot?.querySelector('.conversation-unread')?.textContent).toBe('2')
+  })
+
+  it('marks realtime replies read while the current conversation is visible', async () => {
+    const sockets: ComponentFakeWebSocket[] = []
+    const currentHistory: AiEmployeeMessage[] = [
+      {
+        id: '401',
+        sessionId: 'session-1',
+        role: 'assistant',
+        content: '当前历史回复',
+        createdAt: '2026-08-15T01:00:00.000Z',
+      },
+    ]
+    const transport = {
+      ...createTransport(currentHistory),
+      listSessions: vi.fn(async () => [
+        {
+          sessionId: 'session-1',
+          title: '当前会话',
+          latestMessage: '当前实时回复',
+          latestMessageId: '402',
+          updatedAt: '2026-08-15T01:02:00.000Z',
+          unreadCount: 1,
+        },
+        {
+          sessionId: 'session-2',
+          title: '其他会话',
+          latestMessage: '其他会话回复',
+          latestMessageId: '403',
+          updatedAt: '2026-08-15T01:01:00.000Z',
+          unreadCount: 2,
+        },
+      ]),
+      markSessionRead: vi.fn(async () => undefined),
+    } satisfies AiEmployeeTransport
+    const chat = document.createElement('uniplat-ai-employee-chat')
+    chat.configure({
+      realtimeUrl: 'wss://kanban.example.com/api/user-realtime/ws',
+      aeCode: 'recruit',
+      agentCode: 'default',
+      sessionId: 'session-1',
+      transport,
+      webSocketFactory: (url) => {
+        const socket = new ComponentFakeWebSocket(url)
+        sockets.push(socket)
+        return socket.asWebSocket()
+      },
+    })
+    document.body.append(chat)
+    chat.open()
+    await vi.waitFor(() =>
+      expect(transport.markSessionRead).toHaveBeenCalledWith('session-1', '401'),
+    )
+    await authenticateAndReadyComponent(sockets[0]!)
+
+    sockets[0]?.receive({
+      type: 'realtime_event',
+      channel: 'ai_employee',
+      event: {
+        type: 'session_message',
+        session_id: 'session-1',
+        payload: {
+          JsonPatch: [
+            {
+              path: '/0',
+              value: {
+                ws_message_id: '402',
+                entry_type: { type: 'assistant_message' },
+                content: JSON.stringify({ text: '当前实时回复' }),
+                create_time: '2026-08-15T01:02:00.000Z',
+              },
+            },
+          ],
+        },
+      },
+    })
+    await vi.waitFor(() =>
+      expect(transport.markSessionRead).toHaveBeenCalledWith('session-1', '402'),
+    )
+
+    chat.shadowRoot?.querySelector<HTMLButtonElement>('.conversation-mark')?.click()
+    await vi.waitFor(() => expect(transport.listSessions).toHaveBeenCalledTimes(1))
+    expect(chat.shadowRoot?.querySelector('.session-item.current .session-item-unread')).toBeNull()
+
+    chat.shadowRoot?.querySelector<HTMLButtonElement>('.session-back-button')?.click()
+    await settle(chat)
+    expect(chat.shadowRoot?.querySelector('.conversation-unread')?.textContent).toBe('2')
+  })
+
+  it('shows the current conversation when the Host has not added session listing yet', async () => {
+    const chat = document.createElement('uniplat-ai-employee-chat')
+    chat.configure({
+      realtimeUrl: 'wss://kanban.example.com/api/user-realtime/ws',
+      aeCode: 'recruit',
+      agentCode: 'default',
+      sessionId: 'session-1',
+      transport: createTransport(),
+      webSocketFactory: () => new ComponentFakeWebSocket('wss://kanban.example.com').asWebSocket(),
+    })
+    document.body.append(chat)
+    chat.open()
+    await settle(chat)
+
+    chat.shadowRoot?.querySelector<HTMLButtonElement>('.conversation-mark')?.click()
+    await settle(chat)
+    expect(chat.shadowRoot?.textContent).toContain('企业服务顾问')
+    expect(chat.shadowRoot?.querySelectorAll('.session-item')).toHaveLength(1)
+
+    chat.shadowRoot?.querySelector<HTMLButtonElement>('.session-back-button')?.click()
+    await settle(chat)
+    expect(chat.shadowRoot?.textContent).toContain('企业服务AI顾问')
+  })
+
+  it('keeps the current conversation visible when session listing fails', async () => {
+    const transport = {
+      ...createTransport(),
+      listSessions: vi.fn(async () => {
+        throw new Error('unsafe upstream response')
+      }),
+    } satisfies AiEmployeeTransport
+    const chat = document.createElement('uniplat-ai-employee-chat')
+    const errors: unknown[] = []
+    chat.addEventListener('error', (event) =>
+      errors.push((event as unknown as CustomEvent<unknown>).detail),
+    )
+    chat.configure({
+      realtimeUrl: 'wss://kanban.example.com/api/user-realtime/ws',
+      aeCode: 'recruit',
+      agentCode: 'default',
+      sessionId: 'session-1',
+      transport,
+      webSocketFactory: () => new ComponentFakeWebSocket('wss://kanban.example.com').asWebSocket(),
+    })
+    document.body.append(chat)
+    chat.open()
+    await settle(chat)
+
+    chat.shadowRoot?.querySelector<HTMLButtonElement>('.conversation-mark')?.click()
+    await vi.waitFor(() => expect(transport.listSessions).toHaveBeenCalledTimes(1))
+    await settle(chat)
+
+    expect(chat.shadowRoot?.textContent).toContain('历史会话暂时无法加载，已显示当前会话。')
+    expect(chat.shadowRoot?.textContent).toContain('企业服务顾问')
+    expect(chat.shadowRoot?.querySelectorAll('.session-item')).toHaveLength(1)
+    expect(JSON.stringify(errors)).not.toContain('unsafe upstream response')
+  })
+})