@csntgao/uni-base 0.1.0

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

@@ -0,0 +1,428 @@
+// @vitest-environment happy-dom
+
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import type { CustomerSupportSession, CustomerSupportTransport } from '@uniplat/ai-employee-client'
+import '../src'
+import { UniplatCustomerSupportChat } from '../src'
+
+const session: CustomerSupportSession = {
+  id: 'support-1',
+  sessionNo: 'CS-1',
+  title: '异地用工咨询',
+  status: 'active',
+  statusText: '服务中',
+  primaryAgent: { id: 'agent-1', name: '王悦', avatarUrl: '', roleName: '客服专员' },
+  lastMessage: '您好，我是人工顾问。',
+  unreadCount: 0,
+  openedAt: '2026-08-18T08:00:00.000Z',
+  updatedAt: '2026-08-18T08:00:00.000Z',
+  version: '1',
+}
+
+class SupportSocket {
+  readyState = 0
+  sent: string[] = []
+  onopen: ((event: Event) => void) | null = null
+  onmessage: ((event: MessageEvent) => void) | null = null
+  onerror: ((event: Event) => void) | null = null
+  onclose: ((event: CloseEvent) => void) | null = null
+  open() {
+    this.readyState = 1
+    this.onopen?.(new Event('open'))
+  }
+  receive(payload: unknown) {
+    this.onmessage?.(new MessageEvent('message', { data: JSON.stringify(payload) }))
+  }
+  send(value: string) {
+    this.sent.push(value)
+  }
+  close() {
+    this.readyState = 3
+    this.onclose?.(new CloseEvent('close', { code: 1000 }))
+  }
+}
+
+describe('<uniplat-customer-support-chat>', () => {
+  afterEach(() => {
+    vi.useRealTimers()
+    document.body.replaceChildren()
+  })
+
+  it('is registered, renders backend history and sends through the customer support transport', async () => {
+    const socket = new SupportSocket()
+    const transport = {
+      getAccessToken: vi.fn(async () => 'support.jwt'),
+      listSessions: vi.fn(async () => [session]),
+      createSession: vi.fn(async () => ({ session })),
+      listMessages: vi.fn(async () => ({
+        messages: [
+          {
+            id: 'message-1',
+            sessionId: 'support-1',
+            sequence: '1',
+            clientMessageId: '',
+            senderType: 'agent' as const,
+            senderName: '王悦',
+            content: '您好，我是人工顾问。',
+            createdAt: '2026-08-18T08:00:00.000Z',
+          },
+        ],
+        latestSequence: '1',
+        sessionVersion: '1',
+      })),
+      sendMessage: vi.fn(async (_sessionId, clientMessageId, content) => ({
+        id: 'message-2',
+        sessionId: 'support-1',
+        sequence: '2',
+        clientMessageId,
+        senderType: 'customer' as const,
+        senderName: '',
+        content,
+        createdAt: '2026-08-18T08:01:00.000Z',
+      })),
+      markRead: vi.fn(async () => undefined),
+    } satisfies CustomerSupportTransport
+    const component = document.createElement('uniplat-customer-support-chat')
+    component.configure({
+      realtimeUrl: 'wss://kanban.example.com/api/user-realtime/ws',
+      transport,
+      requestIdFactory: () => 'a191d25b-815c-4768-8c87-b31941121cca',
+      webSocketFactory: () => socket as unknown as WebSocket,
+    })
+    document.body.append(component)
+    await component.open()
+    await component.updateComplete
+
+    expect(component).toBeInstanceOf(UniplatCustomerSupportChat)
+    expect(component.shadowRoot?.querySelector('.title')?.textContent).toBe('企业客服人工顾问')
+    expect(component.shadowRoot?.querySelector('.subtitle')?.textContent).toBe(
+      '人工客服已接入，可直接发送消息',
+    )
+    expect(component.shadowRoot?.querySelector('[role="status"]')?.textContent).toContain(
+      '正在恢复实时连接',
+    )
+    expect(component.shadowRoot?.textContent).toContain('王悦')
+    expect(component.shadowRoot?.textContent).toContain('您好，我是人工顾问。')
+    socket.open()
+    await Promise.resolve()
+    socket.receive({
+      type: 'realtime_ready',
+      channels: { customer_support: { available: true } },
+      heartbeat_interval_seconds: 25,
+    })
+    await component.updateComplete
+    expect(component.shadowRoot?.querySelector('[role="status"]')?.textContent).toContain(
+      '人工客服在线',
+    )
+    expect(
+      component.shadowRoot?.querySelector('[data-prototype-icon="circle-check-filled"]'),
+    ).toBeTruthy()
+    const textarea = component.shadowRoot?.querySelector('textarea')
+    textarea!.value = '我需要人工协助'
+    textarea!.dispatchEvent(new InputEvent('input', { bubbles: true }))
+    await component.updateComplete
+    component.shadowRoot?.querySelector<HTMLButtonElement>('.send')?.click()
+    await vi.waitFor(() => expect(transport.sendMessage).toHaveBeenCalledTimes(1))
+    expect(transport.sendMessage).toHaveBeenCalledWith(
+      'support-1',
+      'a191d25b-815c-4768-8c87-b31941121cca',
+      '我需要人工协助',
+    )
+    expect(component.outerHTML).not.toContain('support.jwt')
+  })
+
+  it.each([
+    {
+      name: 'waiting session',
+      sessions: [{ ...session, status: 'waiting' as const }],
+      label: '等待客服接入',
+      tone: 'pending',
+      icon: '.status-spinner',
+      connect: false,
+      subtitle: '等待客服接入',
+    },
+    {
+      name: 'closed session',
+      sessions: [{ ...session, status: 'closed' as const }],
+      label: '会话已结束',
+      tone: 'muted',
+      icon: '.status-stop',
+      connect: false,
+      subtitle: '客服会话已结束',
+    },
+    {
+      name: 'session not loaded',
+      sessions: [],
+      label: '正在连接客服通道',
+      tone: 'pending',
+      icon: '.status-spinner',
+      connect: false,
+      subtitle: '尚未建立客服会话',
+    },
+    {
+      name: 'empty waiting session',
+      sessions: [{ ...session, status: 'waiting' as const, lastMessage: '' }],
+      label: '正在连接客服通道',
+      tone: 'pending',
+      icon: '.status-spinner',
+      connect: false,
+      subtitle: '尚未建立客服会话',
+    },
+    {
+      name: 'session not loaded with realtime connected',
+      sessions: [],
+      label: '客服通道已连接',
+      tone: 'success',
+      icon: '[data-prototype-icon="circle-check-filled"]',
+      connect: true,
+      subtitle: '尚未建立客服会话',
+    },
+  ])(
+    'combines session and realtime state for $name',
+    async ({ sessions, label, tone, icon, connect, subtitle }) => {
+      const socket = new SupportSocket()
+      const transport = {
+        getAccessToken: vi.fn(async () => 'support.jwt'),
+        listSessions: vi.fn(async () => sessions),
+        createSession: vi.fn(async () => ({ session })),
+        listMessages: vi.fn(async () => ({
+          messages: [],
+          latestSequence: '',
+          sessionVersion: '1',
+        })),
+        sendMessage: vi.fn(),
+      } satisfies CustomerSupportTransport
+      const component = document.createElement('uniplat-customer-support-chat')
+      component.configure({
+        realtimeUrl: 'wss://kanban.example.com/api/user-realtime/ws',
+        transport,
+        webSocketFactory: () => socket as unknown as WebSocket,
+      })
+      document.body.append(component)
+      await component.open()
+      if (connect) {
+        socket.open()
+        await Promise.resolve()
+        socket.receive({
+          type: 'realtime_ready',
+          channels: { customer_support: { available: true } },
+          heartbeat_interval_seconds: 25,
+        })
+      }
+      await component.updateComplete
+
+      const status = component.shadowRoot?.querySelector('[role="status"]')
+      expect(component.shadowRoot?.querySelector('.subtitle')?.textContent).toBe(subtitle)
+      expect(status?.textContent).toContain(label)
+      expect(status?.classList.contains(tone)).toBe(true)
+      expect(status?.querySelector(icon)).toBeTruthy()
+    },
+  )
+
+  it('prepares a local blank conversation and creates it with the first message', async () => {
+    const socket = new SupportSocket()
+    const waitingSession = {
+      ...session,
+      status: 'waiting' as const,
+      statusText: '等待接入',
+      lastMessage: '首次咨询',
+    }
+    const initialMessage = {
+      id: 'message-first',
+      sessionId: 'support-1',
+      sequence: '1',
+      clientMessageId: 'a191d25b-815c-4768-8c87-b31941121cca',
+      senderType: 'customer' as const,
+      senderName: '',
+      content: '首次咨询',
+      createdAt: '2026-08-18T08:01:00.000Z',
+    }
+    const transport = {
+      getAccessToken: vi.fn(async () => 'support.jwt'),
+      listSessions: vi.fn(async () => [session]),
+      createSession: vi.fn(async () => ({ session: waitingSession, initialMessage })),
+      listMessages: vi.fn(async () => ({
+        messages: [],
+        latestSequence: '',
+        sessionVersion: '1',
+      })),
+      sendMessage: vi.fn(),
+    } satisfies CustomerSupportTransport
+    const component = document.createElement('uniplat-customer-support-chat')
+    component.configure({
+      realtimeUrl: 'wss://kanban.example.com/api/user-realtime/ws',
+      transport,
+      requestIdFactory: () => 'a191d25b-815c-4768-8c87-b31941121cca',
+      webSocketFactory: () => socket as unknown as WebSocket,
+    })
+    document.body.append(component)
+    await component.open()
+    await component.updateComplete
+
+    component.shadowRoot?.querySelector<HTMLButtonElement>('[aria-label="我的客服会话"]')?.click()
+    await vi.waitFor(() => expect(transport.listSessions).toHaveBeenCalledTimes(2))
+    await component.updateComplete
+    component.shadowRoot?.querySelector<HTMLButtonElement>('[aria-label="开启新客服会话"]')?.click()
+    await component.updateComplete
+
+    expect(transport.createSession).not.toHaveBeenCalled()
+    expect(component.shadowRoot?.querySelector('.subtitle')?.textContent).toBe('尚未建立客服会话')
+
+    const textarea = component.shadowRoot?.querySelector('textarea')
+    textarea!.value = '首次咨询'
+    textarea!.dispatchEvent(new InputEvent('input', { bubbles: true }))
+    await component.updateComplete
+    component.shadowRoot?.querySelector<HTMLButtonElement>('.send')?.click()
+
+    await vi.waitFor(() => expect(transport.createSession).toHaveBeenCalledTimes(1))
+    expect(transport.createSession).toHaveBeenCalledWith({
+      clientRequestId: 'a191d25b-815c-4768-8c87-b31941121cca',
+      title: '首次咨询',
+      initialMessage: '首次咨询',
+    })
+    await component.updateComplete
+    expect(component.shadowRoot?.querySelector('.subtitle')?.textContent).toBe('等待客服接入')
+  })
+
+  it('clears the transient realtime error banner once the connection recovers', async () => {
+    vi.useFakeTimers()
+    const socket = new SupportSocket()
+    const transport = {
+      getAccessToken: vi.fn(async () => 'support.jwt'),
+      listSessions: vi.fn(async () => [session]),
+      createSession: vi.fn(async () => ({ session })),
+      listMessages: vi.fn(async () => ({
+        messages: [],
+        latestSequence: '',
+        sessionVersion: '1',
+      })),
+      sendMessage: vi.fn(),
+      markRead: vi.fn(async () => undefined),
+    } satisfies CustomerSupportTransport
+    const component = document.createElement('uniplat-customer-support-chat')
+    component.configure({
+      realtimeUrl: 'wss://kanban.example.com/api/user-realtime/ws',
+      transport,
+      webSocketFactory: () => socket as unknown as WebSocket,
+    })
+    document.body.append(component)
+    await component.open()
+    socket.open()
+    await vi.advanceTimersByTimeAsync(0)
+    socket.receive({
+      type: 'realtime_ready',
+      channels: { customer_support: { available: true } },
+      heartbeat_interval_seconds: 25,
+    })
+    await component.updateComplete
+    expect(component.shadowRoot?.querySelector('.notice')).toBeNull()
+
+    // Transient realtime unavailability (close code 1013) surfaces the retry banner.
+    // happy-dom drops CloseEvent.code, so pass it directly like a real socket would.
+    socket.onclose?.({ code: 1013 } as CloseEvent)
+    await component.updateComplete
+    expect(component.shadowRoot?.querySelector('.notice')?.textContent).toContain(
+      '客服实时鉴权服务暂不可用，正在重试。',
+    )
+
+    // The client reconnects and re-authenticates; the stale banner must clear.
+    await vi.advanceTimersByTimeAsync(60_000)
+    socket.open()
+    await vi.advanceTimersByTimeAsync(0)
+    socket.receive({
+      type: 'realtime_ready',
+      channels: { customer_support: { available: true } },
+      heartbeat_interval_seconds: 25,
+    })
+    await component.updateComplete
+    expect(component.shadowRoot?.querySelector('.notice')).toBeNull()
+    expect(component.shadowRoot?.querySelector('[role="status"]')?.textContent).toContain(
+      '人工客服在线',
+    )
+  })
+
+  it('renders the AI customer service entry and emits only a safe switch request', async () => {
+    const component = document.createElement('uniplat-customer-support-chat')
+    const details: unknown[] = []
+    component.addEventListener('ai-chat-requested', (event) => {
+      details.push((event as CustomEvent).detail)
+    })
+    document.body.append(component)
+    await component.open()
+    await component.updateComplete
+
+    expect(component.shadowRoot?.textContent).toContain('开始和人工客服对话吧')
+    const button = component.shadowRoot?.querySelector<HTMLButtonElement>('.ai-service-button')
+    expect(button?.textContent).toContain('转AI客服')
+    expect(button?.querySelector('[data-prototype-icon="robot"]')).toBeTruthy()
+    button?.click()
+    expect(details).toEqual([{}])
+  })
+
+  it('updates unread badges when another support conversation receives a realtime message', async () => {
+    const socket = new SupportSocket()
+    const otherSession: CustomerSupportSession = {
+      ...session,
+      id: 'support-2',
+      sessionNo: 'CS-2',
+      title: '社保咨询',
+      lastMessage: '旧消息',
+      unreadCount: 0,
+    }
+    const updatedOtherSession = {
+      ...otherSession,
+      lastMessage: '其他会话的新回复',
+      unreadCount: 3,
+      updatedAt: '2026-08-18T09:00:00.000Z',
+      version: '2',
+    }
+    const transport = {
+      getAccessToken: vi.fn(async () => 'support.jwt'),
+      listSessions: vi
+        .fn<() => Promise<readonly CustomerSupportSession[]>>()
+        .mockResolvedValueOnce([session, otherSession])
+        .mockResolvedValue([session, updatedOtherSession]),
+      createSession: vi.fn(async () => ({ session })),
+      listMessages: vi.fn(async () => ({
+        messages: [],
+        latestSequence: '1',
+        sessionVersion: '1',
+      })),
+      sendMessage: vi.fn(),
+      markRead: vi.fn(async () => undefined),
+    } satisfies CustomerSupportTransport
+    const component = document.createElement('uniplat-customer-support-chat')
+    component.configure({
+      realtimeUrl: 'wss://kanban.example.com/api/user-realtime/ws',
+      transport,
+      webSocketFactory: () => socket as unknown as WebSocket,
+    })
+    document.body.append(component)
+    await component.open()
+
+    socket.receive({
+      type: 'realtime_event',
+      channel: 'customer_support',
+      event: {
+        type: 'support_event',
+        event_type: 'support_message_created',
+        session_id: 'support-2',
+        payload: {},
+      },
+    })
+
+    await vi.waitFor(() => expect(transport.listSessions).toHaveBeenCalledTimes(2))
+    await component.updateComplete
+    expect(component.shadowRoot?.querySelector('.conversation-unread')?.textContent).toBe('3')
+
+    component.shadowRoot?.querySelector<HTMLButtonElement>('[aria-label="我的客服会话"]')?.click()
+    await vi.waitFor(() => expect(transport.listSessions).toHaveBeenCalledTimes(3))
+    await vi.waitFor(() =>
+      expect(component.shadowRoot?.querySelectorAll('.session-item')).toHaveLength(2),
+    )
+    const items = [...(component.shadowRoot?.querySelectorAll('.session-item') ?? [])]
+    expect(items[0]?.querySelector('.session-item-unread')).toBeNull()
+    expect(items[1]?.querySelector('.session-item-unread')?.textContent).toBe('3')
+    expect(items[1]?.textContent).toContain('其他会话的新回复')
+  })
+})

package/packages/web-components/tests/customer-support-transport.test.ts

@@ -0,0 +1,79 @@
+// @vitest-environment happy-dom
+
+import { describe, expect, it, vi } from 'vitest'
+import { createHrSaasCustomerSupportTransport } from '../src'
+
+function response(data: unknown): Response {
+  return new Response(JSON.stringify({ rescode: 0, data }), {
+    status: 200,
+    headers: { 'content-type': 'application/json' },
+  })
+}
+
+describe('createHrSaasCustomerSupportTransport', () => {
+  it('maps HR-SaaS endpoints and keeps JWT only in Authorization headers', async () => {
+    const fetchImplementation = vi.fn(async (input: string | URL | Request, init?: RequestInit) => {
+      const url = String(input)
+      if (url.endsWith('/user_session_page')) {
+        return response({
+          list: [
+            {
+              session_id: '81',
+              title: '服务咨询',
+              status: 'active',
+              unread_count: 2,
+              primary_agent: { agent_id: '7', name: '王悦', role_name: '客服专员' },
+              last_message: { content_preview: '您好' },
+            },
+          ],
+        })
+      }
+      if (url.endsWith('/user_message_page')) {
+        return response({
+          messages: [
+            {
+              message_id: '91',
+              session_id: '81',
+              sequence: '1',
+              sender_type: 'agent',
+              sender_name: '王悦',
+              content: '您好',
+              created_at: '2026-08-18T08:00:00Z',
+            },
+          ],
+          latest_sequence: '1',
+          session_version: '2',
+        })
+      }
+      throw new Error(`Unexpected endpoint: ${url} ${String(init?.body)}`)
+    })
+    const transport = createHrSaasCustomerSupportTransport({
+      serviceBaseUrl: 'https://hr.example.com/general/project/hr_saas/service/customer_support_api',
+      getAccessToken: () => 'customer.support.jwt',
+      fetch: fetchImplementation as typeof fetch,
+    })
+
+    const sessions = await transport.listSessions()
+    const page = await transport.listMessages('81')
+
+    expect(sessions[0]).toMatchObject({
+      id: '81',
+      title: '服务咨询',
+      status: 'active',
+      unreadCount: 2,
+      primaryAgent: { id: '7', name: '王悦' },
+      lastMessage: '您好',
+    })
+    expect(page.messages[0]).toMatchObject({
+      id: '91',
+      sessionId: '81',
+      senderType: 'agent',
+      content: '您好',
+    })
+    for (const call of fetchImplementation.mock.calls) {
+      expect(String(call[0])).not.toContain('customer.support.jwt')
+      expect(JSON.stringify(call[1]?.body)).not.toContain('customer.support.jwt')
+      expect(new Headers(call[1]?.headers).get('authorization')).toBe('Bearer customer.support.jwt')
+    }
+  })
+})