@csntgao/uni-base 0.1.0

package/packages/web-components/src/chat.ts

@@ -0,0 +1,1754 @@
+import {
+  AiEmployeeClient,
+  AiEmployeeClientError,
+  type AiEmployeeClientErrorDetail,
+  type AiEmployeeClientOptions,
+  type AiEmployeeConnectionState,
+  type AiEmployeeMessage,
+  type AiEmployeeSessionSummary,
+} from '@uniplat/ai-employee-client'
+import { LitElement, css, html, nothing, type PropertyValues } from 'lit'
+import type { UniplatCustomerSupportChat, CustomerSupportChatConfig } from './customer-support-chat'
+import { createHrSaasCustomerSupportTransport } from './customer-support-transport'
+import { prototypeIcon } from './prototype-icons'
+import { renderSafeMarkdown } from './safe-markdown'
+
+export interface AiEmployeeChatConfig extends AiEmployeeClientOptions {
+  customerSupport?: CustomerSupportChatConfig
+}
+
+interface LocalReadBoundary {
+  latestMessageId?: string
+  updatedAtMs: number
+}
+
+const AI_ADVISOR_TITLE = '企业服务AI顾问'
+
+export interface AiEmployeeChatEventMap {
+  ready: CustomEvent<{ sessionId: string }>
+  'message-sent': CustomEvent<{ sessionId: string; message: AiEmployeeMessage }>
+  'message-received': CustomEvent<{ sessionId: string; message: AiEmployeeMessage }>
+  'connection-state-change': CustomEvent<{ state: AiEmployeeConnectionState }>
+  error: CustomEvent<AiEmployeeClientErrorDetail>
+}
+
+export class UniplatAiEmployeeChat extends LitElement {
+  static override properties = {
+    messages: { state: true },
+    draft: { state: true },
+    loadingHistory: { state: true },
+    sending: { state: true },
+    processing: { state: true },
+    connectionState: { state: true },
+    visibleError: { state: true },
+    chatTitle: { state: true },
+    drawerOpen: { state: true },
+    sessionPanelOpen: { state: true },
+    sessions: { state: true },
+    loadingSessions: { state: true },
+    sessionListError: { state: true },
+    switchingSessionId: { state: true },
+    creatingSession: { state: true },
+    customerSupportOpen: { state: true },
+  }
+
+  static override styles = css`
+    :host {
+      --uniplat-chat-primary: #2e6bf5;
+      --uniplat-chat-primary-contrast: #ffffff;
+      --uniplat-chat-background: #ffffff;
+      --uniplat-chat-surface: #f7fafd;
+      --uniplat-chat-text: #25303f;
+      --uniplat-chat-muted: #8b98a6;
+      --uniplat-chat-border: #e4ebf3;
+      --uniplat-chat-error: #b42318;
+      --uniplat-chat-font-family:
+        Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      --uniplat-chat-width: 420px;
+      --uniplat-chat-height: 100dvh;
+      --uniplat-chat-radius: 0;
+      --uniplat-chat-z-index: 500;
+      display: contents;
+      color: var(--uniplat-chat-text);
+      font-family: var(--uniplat-chat-font-family);
+      line-height: 1.5;
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    .chat {
+      position: fixed;
+      z-index: var(--uniplat-chat-z-index);
+      inset: 0 0 0 auto;
+      display: flex;
+      flex-direction: column;
+      width: var(--uniplat-chat-width);
+      max-width: 96vw;
+      height: var(--uniplat-chat-height);
+      overflow: hidden;
+      border: 0;
+      border-left: 1px solid var(--uniplat-chat-border);
+      border-radius: var(--uniplat-chat-radius);
+      background: var(--uniplat-chat-background);
+      box-shadow: -14px 0 34px rgb(20 40 80 / 8%);
+    }
+
+    .header {
+      display: flex;
+      align-items: center;
+      flex: 0 0 auto;
+      gap: 10px;
+      padding: 16px 18px;
+      border-bottom: 1px solid #edf1f6;
+      background: var(--uniplat-chat-background);
+    }
+
+    .advisor-mark,
+    .assistant-avatar {
+      display: flex;
+      flex: 0 0 auto;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .conversation-mark {
+      position: relative;
+      display: flex;
+      width: 34px;
+      height: 34px;
+      min-width: 0;
+      min-height: 0;
+      flex: 0 0 auto;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+      border: 0;
+      border-radius: 9px;
+      outline: none;
+      background: transparent;
+      color: #5a6673;
+      cursor: pointer;
+    }
+
+    .conversation-mark:hover,
+    .conversation-mark:focus-visible {
+      background: #f0f3f8;
+      color: #25303f;
+    }
+
+    .conversation-unread {
+      position: absolute;
+      top: -4px;
+      right: -4px;
+      display: grid;
+      min-width: 16px;
+      height: 16px;
+      place-items: center;
+      padding: 0 4px;
+      border: 2px solid var(--uniplat-chat-background);
+      border-radius: 999px;
+      background: #e03131;
+      color: #fff;
+      font-size: 9px;
+      font-weight: 800;
+      line-height: 1;
+    }
+
+    .advisor-mark {
+      width: 38px;
+      height: 38px;
+      border-radius: 11px;
+      background: #eaf1fe;
+      color: var(--uniplat-chat-primary);
+    }
+
+    .conversation-mark svg {
+      width: 19px;
+      height: 19px;
+    }
+
+    .advisor-mark svg {
+      width: 20px;
+      height: 20px;
+    }
+
+    .heading {
+      min-width: 0;
+      flex: 1 1 0;
+    }
+
+    .title {
+      overflow: hidden;
+      color: #182634;
+      font-size: 16px;
+      font-weight: 800;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .subtitle {
+      overflow: hidden;
+      margin-top: 2px;
+      color: var(--uniplat-chat-muted);
+      font-size: 12.5px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .close-button {
+      display: flex;
+      width: 32px;
+      height: 32px;
+      min-width: 0;
+      min-height: 0;
+      flex: 0 0 auto;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+      border: 0;
+      border-radius: 8px;
+      outline: none;
+      background: transparent;
+      color: var(--uniplat-chat-muted);
+      cursor: pointer;
+    }
+
+    .close-button:hover,
+    .close-button:focus-visible {
+      background: #f0f3f8;
+      color: #25303f;
+    }
+
+    .close-button svg {
+      width: 18px;
+      height: 18px;
+    }
+
+    .session-header {
+      display: flex;
+      min-height: 68px;
+      flex: 0 0 auto;
+      align-items: center;
+      gap: 10px;
+      padding: 16px 18px;
+      border-bottom: 1px solid #edf1f6;
+      background: var(--uniplat-chat-background);
+    }
+
+    .session-back-button {
+      display: flex;
+      width: 32px;
+      height: 32px;
+      min-width: 0;
+      min-height: 0;
+      flex: 0 0 auto;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+      border: 0;
+      border-radius: 8px;
+      outline: none;
+      background: transparent;
+      color: #5a6673;
+      cursor: pointer;
+    }
+
+    .session-back-button:hover,
+    .session-back-button:focus-visible {
+      background: #f0f3f8;
+      color: #25303f;
+    }
+
+    .session-back-button svg {
+      width: 18px;
+      height: 18px;
+    }
+
+    .session-heading {
+      min-width: 0;
+      flex: 1 1 0;
+      color: #182634;
+      font-size: 16px;
+      font-weight: 800;
+    }
+
+    .session-new-button {
+      display: flex;
+      width: 32px;
+      height: 32px;
+      min-width: 0;
+      min-height: 0;
+      flex: 0 0 auto;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+      border: 0;
+      border-radius: 8px;
+      outline: none;
+      background: transparent;
+      color: var(--uniplat-chat-primary);
+      cursor: pointer;
+    }
+
+    .session-new-button:hover,
+    .session-new-button:focus-visible {
+      background: #f0f5ff;
+    }
+
+    .session-new-button:disabled {
+      cursor: wait;
+      opacity: 0.5;
+    }
+
+    .session-new-button svg {
+      width: 19px;
+      height: 19px;
+    }
+
+    .session-list {
+      min-height: 0;
+      flex: 1 1 0;
+      overflow-y: auto;
+      padding: 10px 12px 18px;
+      background: var(--uniplat-chat-background);
+      overscroll-behavior: contain;
+    }
+
+    .session-list-loading,
+    .session-list-empty,
+    .session-list-error {
+      display: grid;
+      min-height: 180px;
+      place-items: center;
+      padding: 24px;
+      color: var(--uniplat-chat-muted);
+      font-size: 13px;
+      text-align: center;
+    }
+
+    .session-list-error {
+      color: var(--uniplat-chat-error);
+    }
+
+    .session-list-notice {
+      margin: 2px 4px 10px;
+      padding: 8px 10px;
+      border: 1px solid color-mix(in srgb, var(--uniplat-chat-error), transparent 76%);
+      border-radius: 8px;
+      background: color-mix(in srgb, var(--uniplat-chat-error), transparent 96%);
+      color: var(--uniplat-chat-error);
+      font-size: 12px;
+      line-height: 1.5;
+    }
+
+    .session-item {
+      display: grid;
+      width: 100%;
+      min-width: 0;
+      min-height: 70px;
+      grid-template-columns: 42px minmax(0, 1fr) auto;
+      grid-template-rows: auto auto;
+      align-items: center;
+      column-gap: 10px;
+      padding: 10px 12px;
+      border: 0;
+      border-radius: 10px;
+      outline: none;
+      background: transparent;
+      color: var(--uniplat-chat-text);
+      cursor: pointer;
+      font: inherit;
+      text-align: left;
+    }
+
+    .session-item + .session-item {
+      margin-top: 4px;
+    }
+
+    .session-item:hover,
+    .session-item:focus-visible,
+    .session-item.current {
+      background: #f0f5ff;
+    }
+
+    .session-item:disabled {
+      cursor: wait;
+      opacity: 0.65;
+    }
+
+    .session-item-icon {
+      display: flex;
+      width: 38px;
+      height: 38px;
+      grid-row: 1 / span 2;
+      align-items: center;
+      justify-content: center;
+      border-radius: 10px;
+      background: #eaf1fe;
+      color: var(--uniplat-chat-primary);
+    }
+
+    .session-item-icon svg {
+      width: 19px;
+      height: 19px;
+    }
+
+    .session-item-title,
+    .session-item-preview {
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .session-item-title {
+      align-self: end;
+      font-size: 13.5px;
+      font-weight: 800;
+    }
+
+    .session-item-preview {
+      align-self: start;
+      color: var(--uniplat-chat-muted);
+      font-size: 11.5px;
+    }
+
+    .session-item-side {
+      display: flex;
+      min-width: 42px;
+      height: 100%;
+      grid-column: 3;
+      grid-row: 1 / span 2;
+      flex-direction: column;
+      align-items: flex-end;
+      justify-content: space-between;
+      gap: 6px;
+      color: #a6b1be;
+      font-size: 10.5px;
+    }
+
+    .session-item-unread {
+      display: grid;
+      min-width: 17px;
+      height: 17px;
+      place-items: center;
+      padding: 0 4px;
+      border-radius: 999px;
+      background: #e03131;
+      color: #fff;
+      font-size: 9px;
+      font-weight: 800;
+    }
+
+    .sr-only {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      clip-path: inset(50%);
+    }
+
+    .messages {
+      min-height: 0;
+      flex: 1 1 0;
+      overflow-y: auto;
+      padding: 16px 18px;
+      background: var(--uniplat-chat-surface);
+      overscroll-behavior: contain;
+    }
+
+    .time-marker {
+      margin-bottom: 14px;
+      color: #a6b1be;
+      font-size: 11.5px;
+      text-align: center;
+    }
+
+    .message-row {
+      display: flex;
+      align-items: flex-start;
+      margin: 0 0 14px;
+    }
+
+    .message-row.user {
+      justify-content: flex-end;
+    }
+
+    .message-row.system {
+      justify-content: center;
+    }
+
+    .assistant-message {
+      display: flex;
+      max-width: 88%;
+      gap: 9px;
+    }
+
+    .assistant-avatar {
+      width: 30px;
+      height: 30px;
+      border-radius: 50%;
+      background: #eaf1fe;
+      color: var(--uniplat-chat-primary);
+    }
+
+    .assistant-avatar svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    .assistant-content {
+      min-width: 0;
+    }
+
+    .assistant-label {
+      display: block;
+      margin-bottom: 4px;
+      color: #a6b1be;
+      font-size: 11.5px;
+    }
+
+    .message {
+      width: fit-content;
+      min-width: 0;
+      max-width: 82%;
+      padding: 11px 14px;
+      border: 1px solid #e7edf5;
+      border-radius: 2px 12px 12px;
+      background: var(--uniplat-chat-background);
+      color: var(--uniplat-chat-text);
+      font-size: 13.5px;
+      line-height: 1.8;
+      overflow-wrap: anywhere;
+      white-space: pre-wrap;
+    }
+
+    .assistant-content .message {
+      display: block;
+      max-width: none;
+    }
+
+    .message.user {
+      border-color: var(--uniplat-chat-primary);
+      border-radius: 12px 2px 12px 12px;
+      background: var(--uniplat-chat-primary);
+      color: var(--uniplat-chat-primary-contrast);
+    }
+
+    .message.system {
+      border: 0;
+      border-radius: 999px;
+      background: #edf1f6;
+      color: #7c8998;
+      font-size: 12px;
+      line-height: 1.5;
+    }
+
+    .message.error {
+      border-color: color-mix(in srgb, var(--uniplat-chat-error), transparent 65%);
+      color: var(--uniplat-chat-error);
+    }
+
+    .message.markdown {
+      white-space: normal;
+    }
+
+    .message.markdown .md-heading {
+      margin: 0 0 8px;
+      font-weight: 750;
+      line-height: 1.45;
+    }
+
+    .message.markdown .md-h1 {
+      font-size: 1.3em;
+    }
+
+    .message.markdown .md-h2 {
+      font-size: 1.2em;
+    }
+
+    .message.markdown .md-h3,
+    .message.markdown .md-h4 {
+      font-size: 1.08em;
+    }
+
+    .message.markdown .md-p {
+      margin: 0 0 9px;
+    }
+
+    .message.markdown > :last-child {
+      margin-bottom: 0;
+    }
+
+    .message.markdown .md-list {
+      margin: 0 0 9px;
+      padding-left: 1.5em;
+    }
+
+    .message.markdown .md-list li + li {
+      margin-top: 3px;
+    }
+
+    .message.markdown .md-code {
+      padding: 1px 5px;
+      border-radius: 4px;
+      background: #f1f5f9;
+      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+      font-size: 0.92em;
+    }
+
+    .message.markdown .md-pre {
+      overflow: auto;
+      margin: 0 0 9px;
+      padding: 10px 12px;
+      border-radius: 8px;
+      background: #f1f5f9;
+      white-space: pre;
+    }
+
+    .message.markdown .md-pre .md-code,
+    .message.markdown .md-pre code {
+      padding: 0;
+      background: transparent;
+    }
+
+    .message.markdown .md-quote {
+      margin: 0 0 9px;
+      padding-left: 10px;
+      border-left: 3px solid #d8e2f0;
+      color: #64748b;
+    }
+
+    .message.markdown .md-hr {
+      margin: 10px 0;
+      border: 0;
+      border-top: 1px solid #e2e8f0;
+    }
+
+    .message.markdown a {
+      color: var(--uniplat-chat-primary);
+      text-decoration: underline;
+      text-underline-offset: 2px;
+    }
+
+    .empty,
+    .loading {
+      display: grid;
+      min-height: 100%;
+      place-items: center;
+      padding: 28px;
+      color: var(--uniplat-chat-muted);
+      font-size: 13.5px;
+      text-align: center;
+    }
+
+    .activity {
+      margin: 4px 0 0 39px;
+      color: #a6b1be;
+      font-size: 12px;
+    }
+
+    .error-banner {
+      margin: 0 0 12px;
+      padding: 8px 10px;
+      border: 1px solid color-mix(in srgb, var(--uniplat-chat-error), transparent 70%);
+      border-radius: 8px;
+      background: color-mix(in srgb, var(--uniplat-chat-error), transparent 94%);
+      color: var(--uniplat-chat-error);
+      font-size: 12px;
+    }
+
+    .composer {
+      flex: 0 0 auto;
+      padding: 12px 18px 16px;
+      border-top: 1px solid #edf1f6;
+      background: var(--uniplat-chat-background);
+    }
+
+    .composer-row {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+
+    input {
+      width: 100%;
+      min-width: 0;
+      height: 44px;
+      flex: 1 1 0;
+      padding: 0 12px;
+      border: 1px solid #e2e9f3;
+      border-radius: 10px;
+      outline: none;
+      background: var(--uniplat-chat-background);
+      color: var(--uniplat-chat-text);
+      font: inherit;
+      font-size: 14px;
+    }
+
+    input:focus {
+      border-color: var(--uniplat-chat-primary);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--uniplat-chat-primary), transparent 86%);
+    }
+
+    input:disabled {
+      cursor: not-allowed;
+      opacity: 0.65;
+    }
+
+    .send-button {
+      display: flex;
+      height: 44px;
+      min-width: 0;
+      min-height: 0;
+      flex: 0 0 auto;
+      align-items: center;
+      padding: 0 18px;
+      border: 0;
+      border-radius: 10px;
+      background: var(--uniplat-chat-primary);
+      color: var(--uniplat-chat-primary-contrast);
+      cursor: pointer;
+      font: inherit;
+      font-size: 14px;
+      font-weight: 700;
+    }
+
+    .send-button:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    .composer-actions {
+      display: flex;
+      align-items: center;
+      margin-top: 10px;
+    }
+
+    .human-service-button {
+      display: inline-flex;
+      min-width: 0;
+      min-height: 0;
+      align-items: center;
+      gap: 5px;
+      padding: 0;
+      border: 0;
+      background: transparent;
+      color: var(--uniplat-chat-primary);
+      cursor: pointer;
+      font: inherit;
+      font-size: 12.5px;
+      font-weight: 700;
+    }
+
+    .human-service-button svg {
+      width: 15px;
+      height: 15px;
+    }
+
+    .human-service-button:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    @media (max-width: 480px) {
+      :host {
+        --uniplat-chat-width: 100vw;
+      }
+    }
+  `
+
+  declare private messages: readonly AiEmployeeMessage[]
+  declare private draft: string
+  declare private loadingHistory: boolean
+  declare private sending: boolean
+  declare private processing: boolean
+  declare private connectionState: AiEmployeeConnectionState
+  declare private visibleError: string
+  declare private chatTitle: string
+  declare private drawerOpen: boolean
+  declare private sessionPanelOpen: boolean
+  declare private sessions: readonly AiEmployeeSessionSummary[]
+  declare private loadingSessions: boolean
+  declare private sessionListError: string
+  declare private switchingSessionId: string
+  declare private creatingSession: boolean
+  declare private customerSupportOpen: boolean
+  private config: AiEmployeeChatConfig | null = null
+  private client: AiEmployeeClient | null = null
+  private clientUnsubscribers: Array<() => void> = []
+  private startGeneration = 0
+  private sessionListGeneration = 0
+  private readyDispatched = false
+  private readSyncGeneration = 0
+  private readonly localMessageIds = new Set<string>()
+  private readonly locallyReadBoundaries = new Map<string, LocalReadBoundary>()
+  private readonly confirmedReadMessageIds = new Map<string, string>()
+  private readonly queuedReadMessageIds = new Map<string, string>()
+  private readonly readSyncChains = new Map<string, Promise<void>>()
+  private pendingInitialMessage = ''
+  private readonly handleWindowKeyDown = (event: KeyboardEvent): void => {
+    if (event.key === 'Escape') this.close()
+  }
+
+  constructor() {
+    super()
+    this.messages = []
+    this.draft = ''
+    this.loadingHistory = false
+    this.sending = false
+    this.processing = false
+    this.connectionState = 'idle'
+    this.visibleError = ''
+    this.chatTitle = '企业服务顾问'
+    this.drawerOpen = false
+    this.sessionPanelOpen = false
+    this.sessions = []
+    this.loadingSessions = false
+    this.sessionListError = ''
+    this.switchingSessionId = ''
+    this.creatingSession = false
+    this.customerSupportOpen = false
+  }
+
+  configure(config: AiEmployeeChatConfig): void {
+    this.config = config
+    this.releaseClient()
+    this.resetView()
+    this.customerSupportOpen = false
+    if (this.isConnected && this.drawerOpen) void this.startClient()
+  }
+
+  open(initialMessage?: string): void {
+    if (this.drawerOpen) return
+    this.pendingInitialMessage = typeof initialMessage === 'string' ? initialMessage.trim() : ''
+    this.drawerOpen = true
+    window.addEventListener('keydown', this.handleWindowKeyDown)
+    if (this.isConnected && this.config) void this.startClient()
+    void this.updateComplete.then(() => {
+      this.renderRoot.querySelector<HTMLButtonElement>('.close-button')?.focus()
+    })
+  }
+
+  close(): void {
+    if (!this.drawerOpen) return
+    this.drawerOpen = false
+    this.pendingInitialMessage = ''
+    window.removeEventListener('keydown', this.handleWindowKeyDown)
+    this.releaseClient()
+  }
+
+  override connectedCallback(): void {
+    super.connectedCallback()
+    if (this.drawerOpen && this.config && !this.client) void this.startClient()
+  }
+
+  override disconnectedCallback(): void {
+    window.removeEventListener('keydown', this.handleWindowKeyDown)
+    this.releaseClient()
+    super.disconnectedCallback()
+  }
+
+  override render() {
+    if (!this.drawerOpen) return nothing
+    if (this.customerSupportOpen) {
+      return html`<uniplat-customer-support-chat
+        @ai-chat-requested=${this.handleAiChatRequested}
+        @closed=${this.handleCustomerSupportClosed}
+      ></uniplat-customer-support-chat>`
+    }
+    if (this.sessionPanelOpen) return this.renderSessionPanel()
+    const inputDisabled = !this.client || this.loadingHistory || this.sending
+    const canSend = !inputDisabled && this.draft.trim().length > 0
+
+    return html`
+      <section
+        class="chat"
+        part="container"
+        role="dialog"
+        aria-modal="false"
+        aria-label=${AI_ADVISOR_TITLE}
+      >
+        <header class="header" part="header">
+          <button
+            class="conversation-mark"
+            part="session-list-button"
+            type="button"
+            title="切换会话"
+            aria-label="打开我的会话"
+            @click=${this.openSessionPanel}
+          >
+            ${prototypeIcon('messages')}
+            ${
+              this.totalUnreadCount > 0
+                ? html`<span
+                    class="conversation-unread"
+                    aria-label="${this.totalUnreadCount} 条未读"
+                    >${formatUnreadCount(this.totalUnreadCount)}</span
+                  >`
+                : nothing
+            }
+          </button>
+          <span class="advisor-mark" aria-hidden="true">${prototypeIcon('robot')}</span>
+          <span class="heading">
+            <span class="title">${AI_ADVISOR_TITLE}</span>
+            <span class="subtitle">7×24 小时在线，任何问题都可以问我</span>
+          </span>
+          <span class="sr-only" part="status" aria-live="polite">
+            ${connectionLabel(this.connectionState)}
+          </span>
+          <button
+            class="close-button"
+            part="close-button"
+            type="button"
+            aria-label="关闭企业服务AI顾问"
+            @click=${this.close}
+          >
+            ${prototypeIcon('x')}
+          </button>
+        </header>
+
+        <main class="messages" part="messages" role="log" aria-live="polite">
+          ${
+            this.visibleError
+              ? html`<div class="error-banner" part="error">${this.visibleError}</div>`
+              : nothing
+          }
+          ${this.renderTimeMarker()} ${this.renderMessages()}
+          ${
+            this.processing
+              ? html`<p class="activity" part="activity">数字员工处理中…</p>`
+              : nothing
+          }
+        </main>
+
+        <form class="composer" part="composer" @submit=${this.handleSubmit}>
+          <div class="composer-row">
+            <input
+              part="input"
+              type="text"
+              aria-label="消息内容"
+              placeholder="输入你的问题……"
+              .value=${this.draft}
+              ?disabled=${inputDisabled}
+              @input=${this.handleInput}
+            />
+            <button class="send-button" part="send-button" type="submit" ?disabled=${!canSend}>
+              ${this.sending ? '发送中…' : '发送'}
+            </button>
+          </div>
+          <div class="composer-actions">
+            <button
+              class="human-service-button"
+              part="human-service-button"
+              type="button"
+              ?disabled=${inputDisabled}
+              @click=${this.handleHumanServiceRequest}
+            >
+              ${prototypeIcon('headset')}转人工
+            </button>
+          </div>
+        </form>
+      </section>
+    `
+  }
+
+  protected override updated(changed: PropertyValues): void {
+    if (changed.has('messages') || changed.has('processing') || changed.has('visibleError')) {
+      const container = this.renderRoot.querySelector<HTMLElement>('.messages')
+      if (container) container.scrollTop = container.scrollHeight
+    }
+  }
+
+  private renderSessionPanel() {
+    return html`
+      <section class="chat" part="container" role="dialog" aria-modal="false" aria-label="我的会话">
+        <header class="session-header" part="session-header">
+          <button
+            class="session-back-button"
+            part="session-back-button"
+            type="button"
+            aria-label="返回当前会话"
+            @click=${this.closeSessionPanel}
+          >
+            ${prototypeIcon('arrow-left')}
+          </button>
+          <span class="session-heading">我的会话</span>
+          <button
+            class="session-new-button"
+            part="session-new-button"
+            type="button"
+            title="开启新对话"
+            aria-label="开启新对话"
+            ?disabled=${this.creatingSession || this.switchingSessionId !== ''}
+            @click=${() => void this.startNewSession()}
+          >
+            ${prototypeIcon('plus')}
+          </button>
+          <button
+            class="close-button"
+            part="close-button"
+            type="button"
+            aria-label="关闭企业服务AI顾问"
+            @click=${this.close}
+          >
+            ${prototypeIcon('x')}
+          </button>
+        </header>
+        <main class="session-list" part="session-list" aria-live="polite">
+          ${this.renderSessionListContent()}
+        </main>
+      </section>
+    `
+  }
+
+  private renderSessionListContent() {
+    if (this.loadingSessions) {
+      return html`<div class="session-list-loading" part="session-list-loading">正在加载会话…</div>`
+    }
+    if (this.sessionListError && this.sessions.length === 0) {
+      return html`<div class="session-list-error" part="session-list-error">
+        ${this.sessionListError}
+      </div>`
+    }
+    if (this.sessions.length === 0) {
+      return html`<div class="session-list-empty" part="session-list-empty">暂无历史会话</div>`
+    }
+    return html`
+      ${
+        this.sessionListError
+          ? html`<div class="session-list-notice" part="session-list-notice">
+              ${this.sessionListError}
+            </div>`
+          : nothing
+      }
+      ${this.sessions.map((session) => {
+        const current = session.sessionId === this.client?.sessionId
+        return html`
+          <button
+            class="session-item ${current ? 'current' : ''}"
+            part="session-item ${current ? 'session-item-current' : ''}"
+            type="button"
+            aria-current=${current ? 'true' : nothing}
+            ?disabled=${this.creatingSession || this.switchingSessionId !== ''}
+            @click=${() => void this.selectSession(session)}
+          >
+            <span class="session-item-icon" aria-hidden="true">${prototypeIcon('robot')}</span>
+            <span class="session-item-title">${session.title}</span>
+            <span class="session-item-preview">${session.latestMessage || '暂无消息'}</span>
+            <span class="session-item-side">
+              <span>${formatRelativeTime(session.updatedAt)}</span>
+              ${
+                !current && session.unreadCount > 0
+                  ? html`<span
+                      class="session-item-unread"
+                      aria-label="${session.unreadCount} 条未读"
+                      >${formatUnreadCount(session.unreadCount)}</span
+                    >`
+                  : nothing
+              }
+            </span>
+          </button>
+        `
+      })}
+    `
+  }
+
+  private renderMessages() {
+    if (this.loadingHistory) {
+      return html`<div class="loading" part="loading">正在加载消息…</div>`
+    }
+    if (this.messages.length === 0) {
+      return html`<div class="empty" part="empty">开始和AI客服对话吧</div>`
+    }
+    return this.messages.map((message) => this.renderMessage(message))
+  }
+
+  private renderTimeMarker() {
+    const firstMessage = this.messages[0]
+    if (!firstMessage) return nothing
+    return html`<div class="time-marker" part="time-marker">
+      今天 ${formatMessageTime(firstMessage.createdAt)}
+    </div>`
+  }
+
+  private renderMessage(message: AiEmployeeMessage) {
+    if (message.role === 'user' || message.role === 'system') {
+      return html`
+        <div class="message-row ${message.role}">
+          <div
+            class="message ${message.role}"
+            part="message message-${message.role}"
+            data-message-id=${message.id}
+            .textContent=${message.content}
+          ></div>
+        </div>
+      `
+    }
+    return html`
+      <div class="message-row ${message.role}">
+        <div class="assistant-message">
+          <span class="assistant-avatar" aria-hidden="true">${prototypeIcon('robot')}</span>
+          <div class="assistant-content">
+            <span class="assistant-label"
+              >${message.role === 'error' ? '系统提示' : '在线顾问'}</span
+            >
+            <div
+              class="message ${message.role} ${message.role === 'assistant' ? 'markdown' : ''}"
+              part="message message-${message.role}"
+              data-message-id=${message.id}
+            >
+              ${message.role === 'assistant' ? renderSafeMarkdown(message.content) : message.content}
+            </div>
+          </div>
+        </div>
+      </div>
+    `
+  }
+
+  private async startClient(): Promise<void> {
+    const config = this.config
+    if (!config || this.client || !this.isConnected) return
+    const generation = ++this.startGeneration
+    this.loadingHistory = true
+    this.visibleError = ''
+    this.readyDispatched = false
+
+    let client: AiEmployeeClient
+    try {
+      client = new AiEmployeeClient(config)
+    } catch (error) {
+      this.loadingHistory = false
+      this.handlePublicError(publicError(error, 'INVALID_CONFIGURATION', '聊天配置无效。'))
+      return
+    }
+
+    this.client = client
+    this.attachClientListeners(client)
+    let started = false
+    try {
+      const result = await client.start()
+      if (!this.isCurrentStart(client, generation)) return
+      this.messages = result.messages
+      started = true
+    } catch (error) {
+      if (this.isCurrentStart(client, generation)) {
+        this.handlePublicError(publicError(error, 'SESSION_UNAVAILABLE', '聊天初始化失败。'))
+      }
+    } finally {
+      if (this.isCurrentStart(client, generation)) this.loadingHistory = false
+    }
+    if (started && this.isCurrentStart(client, generation)) {
+      await this.sendPendingInitialMessage(client)
+    }
+  }
+
+  private async sendPendingInitialMessage(client: AiEmployeeClient): Promise<void> {
+    const content = this.pendingInitialMessage
+    if (!content || this.client !== client) return
+    this.pendingInitialMessage = ''
+    await this.sendContent(content)
+  }
+
+  private attachClientListeners(client: AiEmployeeClient): void {
+    this.clientUnsubscribers = [
+      client.on('history', ({ sessionId, messages }) => {
+        if (this.client !== client) return
+        this.messages = messages
+        if (this.isCurrentConversationVisible(sessionId)) void this.markCurrentSessionRead()
+      }),
+      client.on('message', ({ sessionId, message, source }) => {
+        if (this.client !== client) return
+        if (source === 'local') this.localMessageIds.add(message.id)
+        this.messages = client.messages
+        const visible = this.isCurrentConversationVisible(sessionId)
+        const summary = this.updateSessionFromMessage(message, source, visible)
+        if (visible && source === 'realtime') void this.markSessionRead(summary)
+        if (source === 'local') {
+          this.dispatchPublicEvent('message-sent', { sessionId, message })
+        } else {
+          this.dispatchPublicEvent('message-received', { sessionId, message })
+        }
+      }),
+      client.on('connection-state-change', ({ current }) => {
+        if (this.client !== client) return
+        this.connectionState = current
+        this.dispatchPublicEvent('connection-state-change', { state: current })
+      }),
+      client.on('processing-state-change', ({ processing }) => {
+        if (this.client === client) this.processing = processing
+      }),
+      client.on('title', ({ sessionId, title }) => {
+        if (this.client !== client) return
+        this.chatTitle = title
+        this.sessions = this.sessions.map((session) =>
+          session.sessionId === sessionId ? { ...session, title } : session,
+        )
+      }),
+      client.on('ready', ({ sessionId }) => {
+        if (this.client !== client || this.readyDispatched) return
+        this.readyDispatched = true
+        this.dispatchPublicEvent('ready', { sessionId })
+      }),
+      client.on('error', (detail) => {
+        if (this.client === client) this.handlePublicError(detail)
+      }),
+    ]
+  }
+
+  private get totalUnreadCount(): number {
+    const visibleSessionId = this.currentVisibleSessionId
+    return this.sessions.reduce(
+      (total, session) =>
+        total + (session.sessionId === visibleSessionId ? 0 : session.unreadCount),
+      0,
+    )
+  }
+
+  private get currentVisibleSessionId(): string {
+    return this.drawerOpen && !this.sessionPanelOpen ? (this.client?.sessionId ?? '') : ''
+  }
+
+  private isCurrentConversationVisible(sessionId: string): boolean {
+    return Boolean(sessionId) && sessionId === this.currentVisibleSessionId
+  }
+
+  private openSessionPanel(): void {
+    if (this.sessionPanelOpen) return
+    void this.markCurrentSessionRead()
+    this.sessionPanelOpen = true
+    void this.refreshSessions()
+    void this.updateComplete.then(() => {
+      this.renderRoot.querySelector<HTMLButtonElement>('.session-back-button')?.focus()
+    })
+  }
+
+  private closeSessionPanel(): void {
+    if (!this.sessionPanelOpen) return
+    this.sessionListGeneration += 1
+    this.loadingSessions = false
+    this.sessionPanelOpen = false
+    void this.markCurrentSessionRead()
+    void this.updateComplete.then(() => {
+      this.renderRoot.querySelector<HTMLButtonElement>('.conversation-mark')?.focus()
+    })
+  }
+
+  private async refreshSessions(): Promise<void> {
+    const transport = this.config?.transport
+    const listSessions = transport?.listSessions
+    const generation = ++this.sessionListGeneration
+    this.loadingSessions = true
+    this.sessionListError = ''
+    if (!listSessions) {
+      this.loadingSessions = false
+      this.sessions = this.currentSessionSummary()
+      return
+    }
+    try {
+      const sessions = normalizeSessionSummaries(await listSessions.call(transport))
+      if (!this.isCurrentSessionList(generation)) return
+      const mergedSessions = mergeCurrentSession(sessions, this.currentSessionSummary())
+      this.sessions = this.applyLocallyReadState(mergedSessions)
+      const currentSession = mergedSessions.find(
+        (session) => session.sessionId === this.client?.sessionId,
+      )
+      if (currentSession) {
+        this.sessions = this.sessions.map((session) =>
+          session.sessionId === currentSession.sessionId && session.unreadCount > 0
+            ? { ...session, unreadCount: 0 }
+            : session,
+        )
+        void this.markSessionRead(currentSession)
+      }
+    } catch {
+      if (!this.isCurrentSessionList(generation)) return
+      this.sessions = this.currentSessionSummary()
+      this.sessionListError =
+        this.sessions.length > 0
+          ? '历史会话暂时无法加载，已显示当前会话。'
+          : '会话列表加载失败，请稍后重试。'
+      this.dispatchPublicEvent('error', {
+        code: 'SESSION_UNAVAILABLE',
+        message: this.sessionListError,
+        recoverable: true,
+      })
+    } finally {
+      if (this.isCurrentSessionList(generation)) this.loadingSessions = false
+    }
+  }
+
+  private async selectSession(session: AiEmployeeSessionSummary): Promise<void> {
+    const client = this.client
+    if (!client || this.switchingSessionId || this.creatingSession) return
+    if (client.sessionId === session.sessionId) {
+      this.closeSessionPanel()
+      void this.markSessionRead(session)
+      return
+    }
+
+    this.switchingSessionId = session.sessionId
+    this.sessionListError = ''
+    this.readyDispatched = false
+    try {
+      const result = await client.bindSession(session.sessionId)
+      if (this.client !== client || !this.drawerOpen) return
+      this.messages = result.messages
+      this.chatTitle = session.title
+      this.sessionPanelOpen = false
+      void this.markCurrentSessionRead()
+    } catch {
+      if (this.client === client && this.drawerOpen) {
+        this.sessionListError = '会话切换失败，请稍后重试。'
+        this.dispatchPublicEvent('error', {
+          code: 'SESSION_UNAVAILABLE',
+          message: this.sessionListError,
+          recoverable: true,
+        })
+      }
+    } finally {
+      if (this.client === client) this.switchingSessionId = ''
+    }
+  }
+
+  private async startNewSession(): Promise<void> {
+    const client = this.client
+    if (!client || this.creatingSession || this.switchingSessionId) return
+
+    this.creatingSession = true
+    this.sessionListError = ''
+    this.readyDispatched = false
+    try {
+      const result = await client.startNewConversation()
+      if (this.client !== client || !this.drawerOpen) return
+      this.messages = result.messages
+      this.chatTitle = '新对话'
+      if (result.sessionId) {
+        const createdAt = new Date().toISOString()
+        this.sessions = [
+          {
+            sessionId: result.sessionId,
+            title: '新对话',
+            latestMessage: '',
+            updatedAt: createdAt,
+            unreadCount: 0,
+          },
+          ...this.sessions.filter((session) => session.sessionId !== result.sessionId),
+        ]
+      }
+      this.sessionPanelOpen = false
+    } catch {
+      if (this.client === client && this.drawerOpen) {
+        this.sessionListError = '新对话创建失败，请稍后重试。'
+        this.dispatchPublicEvent('error', {
+          code: 'SESSION_UNAVAILABLE',
+          message: this.sessionListError,
+          recoverable: true,
+        })
+      }
+    } finally {
+      if (this.client === client) this.creatingSession = false
+    }
+  }
+
+  private applyLocallyReadState(
+    sessions: readonly AiEmployeeSessionSummary[],
+  ): AiEmployeeSessionSummary[] {
+    return sessions.map((session) => {
+      const boundary = this.locallyReadBoundaries.get(session.sessionId)
+      if (!boundary) return session
+      const updatedAtMs = Date.parse(session.updatedAt)
+      const sameMessage =
+        Boolean(boundary.latestMessageId) && session.latestMessageId === boundary.latestMessageId
+      const withinReadBoundary = Number.isFinite(updatedAtMs) && updatedAtMs <= boundary.updatedAtMs
+      if (!sameMessage && !withinReadBoundary) return session
+      return session.unreadCount > 0 ? { ...session, unreadCount: 0 } : session
+    })
+  }
+
+  private rememberLocalReadBoundary(session: AiEmployeeSessionSummary): void {
+    const updatedAtMs = Date.parse(session.updatedAt)
+    if (!Number.isFinite(updatedAtMs)) return
+    const existing = this.locallyReadBoundaries.get(session.sessionId)
+    if (existing && existing.updatedAtMs > updatedAtMs) return
+    const boundary: LocalReadBoundary = { updatedAtMs }
+    if (session.latestMessageId) boundary.latestMessageId = session.latestMessageId
+    this.locallyReadBoundaries.set(session.sessionId, boundary)
+  }
+
+  private updateSessionFromMessage(
+    message: AiEmployeeMessage,
+    source: 'local' | 'realtime',
+    visible: boolean,
+  ): AiEmployeeSessionSummary {
+    const existing = this.sessions.find((session) => session.sessionId === message.sessionId)
+    const unreadIncrement = source === 'realtime' && !visible && message.role !== 'user' ? 1 : 0
+    const summary: AiEmployeeSessionSummary = {
+      sessionId: message.sessionId,
+      title: existing?.title || this.chatTitle || '新对话',
+      latestMessage: message.content,
+      updatedAt: message.createdAt,
+      unreadCount: visible ? 0 : Math.max(0, (existing?.unreadCount ?? 0) + unreadIncrement),
+    }
+    const latestMessageId = source === 'local' ? existing?.latestMessageId : message.id
+    if (latestMessageId) summary.latestMessageId = latestMessageId
+    this.sessions = [
+      summary,
+      ...this.sessions.filter((session) => session.sessionId !== message.sessionId),
+    ]
+    return summary
+  }
+
+  private currentSessionSummary(): AiEmployeeSessionSummary[] {
+    const sessionId = this.client?.sessionId
+    if (!sessionId) return []
+    const latestMessage = this.messages.at(-1)
+    let latestServerMessage: AiEmployeeMessage | undefined
+    for (let index = this.messages.length - 1; index >= 0; index -= 1) {
+      const candidate = this.messages[index]
+      if (candidate && !this.localMessageIds.has(candidate.id)) {
+        latestServerMessage = candidate
+        break
+      }
+    }
+    const summary: AiEmployeeSessionSummary = {
+      sessionId,
+      title: this.chatTitle || '新对话',
+      latestMessage: latestMessage?.content ?? '',
+      updatedAt: latestMessage?.createdAt ?? new Date().toISOString(),
+      unreadCount: 0,
+    }
+    if (latestServerMessage) summary.latestMessageId = latestServerMessage.id
+    return [summary]
+  }
+
+  private async markSessionRead(session: AiEmployeeSessionSummary): Promise<void> {
+    const transport = this.config?.transport
+    const markSessionRead = transport?.markSessionRead
+    this.rememberLocalReadBoundary(session)
+    this.sessions = this.applyLocallyReadState(this.sessions)
+    const latestMessageId = session.latestMessageId
+    if (!latestMessageId) return
+
+    if (!markSessionRead) return
+    if (this.confirmedReadMessageIds.get(session.sessionId) === latestMessageId) return
+    if (this.queuedReadMessageIds.get(session.sessionId) === latestMessageId) return
+
+    const generation = this.readSyncGeneration
+    const previous = this.readSyncChains.get(session.sessionId) ?? Promise.resolve()
+    this.queuedReadMessageIds.set(session.sessionId, latestMessageId)
+    const task = previous
+      .catch(() => undefined)
+      .then(async () => {
+        if (generation !== this.readSyncGeneration || this.config?.transport !== transport) return
+        try {
+          await markSessionRead.call(transport, session.sessionId, latestMessageId)
+          if (generation === this.readSyncGeneration && this.config?.transport === transport) {
+            this.confirmedReadMessageIds.set(session.sessionId, latestMessageId)
+          }
+        } catch {
+          // The visible conversation remains locally read; a later visibility trigger retries sync.
+        }
+      })
+      .finally(() => {
+        if (this.readSyncChains.get(session.sessionId) === task) {
+          this.readSyncChains.delete(session.sessionId)
+        }
+        if (this.queuedReadMessageIds.get(session.sessionId) === latestMessageId) {
+          this.queuedReadMessageIds.delete(session.sessionId)
+        }
+      })
+    this.readSyncChains.set(session.sessionId, task)
+    await task
+  }
+
+  private async markCurrentSessionRead(): Promise<void> {
+    const summary = this.currentSessionSummary()[0]
+    if (summary) await this.markSessionRead(summary)
+  }
+
+  private isCurrentSessionList(generation: number): boolean {
+    return (
+      this.sessionListGeneration === generation &&
+      this.drawerOpen &&
+      this.sessionPanelOpen &&
+      this.isConnected
+    )
+  }
+
+  private async handleSubmit(event: SubmitEvent): Promise<void> {
+    event.preventDefault()
+    await this.sendContent(this.draft, true)
+  }
+
+  private handleHumanServiceRequest(): void {
+    const customerSupport = this.resolveCustomerSupportConfig()
+    if (!customerSupport) {
+      this.handlePublicError({
+        code: 'INVALID_CONFIGURATION',
+        message: '人工客服暂未配置。',
+        recoverable: false,
+      })
+      return
+    }
+    this.releaseClient()
+    this.customerSupportOpen = true
+    void this.updateComplete.then(() => {
+      const component = this.renderRoot.querySelector<UniplatCustomerSupportChat>(
+        'uniplat-customer-support-chat',
+      )
+      if (!component || !this.customerSupportOpen) return
+      component.configure(customerSupport)
+      void component.open()
+    })
+  }
+
+  private resolveCustomerSupportConfig(): CustomerSupportChatConfig | null {
+    const config = this.config
+    if (!config) return null
+    if (config.customerSupport) return config.customerSupport
+    return {
+      realtimeUrl: config.realtimeUrl,
+      transport: createHrSaasCustomerSupportTransport({
+        serviceBaseUrl: '/api/general/project/hr_saas/service/customer_support_api',
+        getAccessToken: () => config.transport.getAccessToken(),
+      }),
+      reconnect: config.reconnect,
+      webSocketFactory: config.webSocketFactory,
+      requestIdFactory: config.requestIdFactory,
+      minimumHeartbeatMs: config.minimumHeartbeatMs,
+    }
+  }
+
+  private handleCustomerSupportClosed = (): void => {
+    this.customerSupportOpen = false
+    this.drawerOpen = false
+    window.removeEventListener('keydown', this.handleWindowKeyDown)
+  }
+
+  private handleAiChatRequested = (): void => {
+    this.customerSupportOpen = false
+    void this.updateComplete.then(() => {
+      if (this.drawerOpen && this.isConnected && this.config && !this.client) {
+        void this.startClient()
+      }
+    })
+  }
+
+  private async sendContent(value: string, clearDraft = false): Promise<void> {
+    const client = this.client
+    const content = value.trim()
+    if (!client || !content || this.sending) return
+    this.sending = true
+    this.visibleError = ''
+    try {
+      await client.sendMessage(content)
+      if (this.client === client && clearDraft) this.draft = ''
+    } catch (error) {
+      if (
+        !(error instanceof AiEmployeeClientError) ||
+        !['SEND_FAILED', 'RATE_LIMITED', 'FIRST_MESSAGE_CONFLICT'].includes(error.code)
+      ) {
+        this.handlePublicError(publicError(error, 'SEND_FAILED', '消息发送失败，请稍后重试。'))
+      }
+    } finally {
+      if (this.client === client) this.sending = false
+    }
+  }
+
+  private handleInput(event: InputEvent): void {
+    this.draft = (event.currentTarget as HTMLInputElement).value
+  }
+
+  private handlePublicError(detail: AiEmployeeClientErrorDetail): void {
+    this.visibleError = detail.message
+    this.dispatchPublicEvent('error', detail)
+  }
+
+  private dispatchPublicEvent<K extends keyof AiEmployeeChatEventMap>(
+    type: K,
+    detail: AiEmployeeChatEventMap[K]['detail'],
+  ): void {
+    this.dispatchEvent(new CustomEvent(type, { detail, bubbles: true, composed: true }))
+  }
+
+  private isCurrentStart(client: AiEmployeeClient, generation: number): boolean {
+    return (
+      this.client === client &&
+      this.startGeneration === generation &&
+      this.isConnected &&
+      this.drawerOpen
+    )
+  }
+
+  private releaseClient(): void {
+    this.startGeneration += 1
+    this.sessionListGeneration += 1
+    for (const unsubscribe of this.clientUnsubscribers.splice(0)) unsubscribe()
+    this.client?.destroy()
+    this.client = null
+    this.loadingHistory = false
+    this.sending = false
+    this.processing = false
+    this.loadingSessions = false
+    this.switchingSessionId = ''
+    this.creatingSession = false
+    this.connectionState = 'disconnected'
+  }
+
+  private resetView(): void {
+    this.readSyncGeneration += 1
+    this.localMessageIds.clear()
+    this.locallyReadBoundaries.clear()
+    this.confirmedReadMessageIds.clear()
+    this.queuedReadMessageIds.clear()
+    this.readSyncChains.clear()
+    this.messages = []
+    this.draft = ''
+    this.pendingInitialMessage = ''
+    this.visibleError = ''
+    this.chatTitle = '企业服务顾问'
+    this.sessionPanelOpen = false
+    this.sessions = []
+    this.loadingSessions = false
+    this.sessionListError = ''
+    this.switchingSessionId = ''
+    this.creatingSession = false
+    this.connectionState = 'idle'
+  }
+}
+
+function formatMessageTime(value: string): string {
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return ''
+  return new Intl.DateTimeFormat('zh-CN', {
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false,
+  }).format(date)
+}
+
+function formatRelativeTime(value: string): string {
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return ''
+  const elapsed = Date.now() - date.getTime()
+  if (elapsed < 60_000) return '刚刚'
+  if (elapsed < 3_600_000) return `${Math.max(1, Math.floor(elapsed / 60_000))} 分钟前`
+  if (elapsed < 86_400_000) return `${Math.max(1, Math.floor(elapsed / 3_600_000))} 小时前`
+  if (elapsed < 172_800_000) return '昨天'
+  return new Intl.DateTimeFormat('zh-CN', { month: 'numeric', day: 'numeric' }).format(date)
+}
+
+function formatUnreadCount(value: number): string {
+  return value > 99 ? '99+' : String(value)
+}
+
+function normalizeSessionSummaries(value: unknown): AiEmployeeSessionSummary[] {
+  if (!Array.isArray(value)) return []
+  const sessions: AiEmployeeSessionSummary[] = []
+  const identifiers = new Set<string>()
+  for (const candidate of value) {
+    if (!candidate || typeof candidate !== 'object' || Array.isArray(candidate)) continue
+    const record = candidate as Record<string, unknown>
+    const sessionId = safeSessionText(record.sessionId, 128)
+    if (!sessionId || identifiers.has(sessionId)) continue
+    const latestMessage = safeSessionText(record.latestMessage, 240)
+    const serverTitle = safeSessionText(record.title, 100)
+    const title =
+      serverTitle && serverTitle !== '新对话'
+        ? serverTitle
+        : deriveSessionTitle(latestMessage) || '新对话'
+    const latestMessageId = safeSessionText(record.latestMessageId, 128)
+    const updatedAt = safeSessionDate(record.updatedAt)
+    const unreadCount = safeUnreadCount(record.unreadCount)
+    const session: AiEmployeeSessionSummary = {
+      sessionId,
+      title,
+      latestMessage,
+      updatedAt,
+      unreadCount,
+    }
+    if (latestMessageId) session.latestMessageId = latestMessageId
+    sessions.push(session)
+    identifiers.add(sessionId)
+  }
+  return sessions
+}
+
+function mergeCurrentSession(
+  sessions: AiEmployeeSessionSummary[],
+  current: AiEmployeeSessionSummary[],
+): AiEmployeeSessionSummary[] {
+  const currentSession = current[0]
+  if (
+    !currentSession ||
+    sessions.some((session) => session.sessionId === currentSession.sessionId)
+  ) {
+    return sessions
+  }
+  return [currentSession, ...sessions]
+}
+
+function safeSessionText(value: unknown, maximumLength: number): string {
+  return typeof value === 'string' ? value.trim().slice(0, maximumLength) : ''
+}
+
+function deriveSessionTitle(latestMessage: string): string {
+  const normalized = latestMessage
+    .replace(/[*_`#>]/g, '')
+    .replace(/\s+/g, ' ')
+    .replace(/^(?:您好|你好)[！!，,。.:：\s]*/u, '')
+    .trim()
+  if (!normalized) return ''
+
+  const sentenceEnd = normalized.search(/[。！？!?]/u)
+  const candidate =
+    sentenceEnd >= 5 && sentenceEnd < 24 ? normalized.slice(0, sentenceEnd + 1) : normalized
+  const characters = Array.from(candidate)
+  return characters.length > 18 ? `${characters.slice(0, 18).join('')}…` : candidate
+}
+
+function safeSessionDate(value: unknown): string {
+  if (typeof value !== 'string') return ''
+  const date = new Date(value)
+  return Number.isNaN(date.getTime()) ? '' : date.toISOString()
+}
+
+function safeUnreadCount(value: unknown): number {
+  return typeof value === 'number' && Number.isSafeInteger(value) && value > 0
+    ? Math.min(value, 999)
+    : 0
+}
+
+function connectionLabel(state: AiEmployeeConnectionState): string {
+  switch (state) {
+    case 'connected':
+      return '已连接'
+    case 'connecting':
+    case 'authenticating':
+    case 'subscribing':
+      return '连接中'
+    case 'reconnecting':
+      return '重新连接中'
+    case 'destroyed':
+    case 'disconnected':
+      return '已断线'
+    default:
+      return '未连接'
+  }
+}
+
+function publicError(
+  error: unknown,
+  fallbackCode: AiEmployeeClientErrorDetail['code'],
+  fallbackMessage: string,
+): AiEmployeeClientErrorDetail {
+  if (error instanceof AiEmployeeClientError) {
+    return { code: error.code, message: error.message, recoverable: false }
+  }
+  return { code: fallbackCode, message: fallbackMessage, recoverable: true }
+}