How zm110110/customer_service_ui works
The repository provides an embeddable customer-service chat SDK and a separate, early-stage operations console. The primary workflow is a host page initializing the SDK, opening an inline or floating chat, sending messages to an agent endpoint, and rendering streamed text or typed node replies. The chat also supports handoff to a host-integrated human-support system. The console currently demonstrates ticket monitoring; knowledge-base and Agent configuration appear as planned navigation areas. Connections to the backend and human-support system are based on documented integration contracts, not sampled server implementations.
Main entry points: CustomerServiceChat.vue Chat UI · index.js SDK Initializer · App.vue SDK Demo Page · CustomerServiceLauncher.vue Floating Launcher
Components 10
Embeddable SDK
- SDK Initializer
apps/customer-service-frontend/src/index.js - Floating Launcher
apps/customer-service-frontend/src/components/CustomerServiceLauncher.vue
Chat Runtime
- Chat UI
apps/customer-service-frontend/src/components/CustomerServiceChat.vue - SSE and Node Parser
apps/customer-service-frontend/src/utils/sse.js
SDK Demo
- SDK Demo Page
apps/customer-service-frontend/src/App.vue
Operations Console
- Ticket Monitor
apps/customer-service-admin/src/App.vue
Other components
- Host Page
- Agent API
- Human Support System
- Operations Staff
Connections 12
- Host Page → SDK Initializer: initializes
apps/customer-service-frontend/src/index.js - SDK Initializer → Floating Launcher: mounts floating
apps/customer-service-frontend/src/index.js - SDK Initializer → Chat UI: mounts inline
apps/customer-service-frontend/src/index.js - Floating Launcher → Chat UI: renders
apps/customer-service-frontend/src/components/CustomerServiceLauncher.vue - Chat UI → SSE and Node Parser: parses stream
apps/customer-service-frontend/src/components/CustomerServiceChat.vue - Chat UI → Agent API: requests stream
- Agent API → Chat UI: streams replies
- Chat UI → Human Support System: delegates handoff
- Human Support System → Chat UI: pushes replies
- SDK Demo Page → Chat UI: demonstrates
apps/customer-service-frontend/src/App.vue - SDK Demo Page → SSE and Node Parser: uses parser
apps/customer-service-frontend/src/App.vue - Operations Staff → Ticket Monitor: monitors tickets
README.md