# zm110110/customer_service_ui architecture

> Architecture diagram of the GitHub repository zm110110/customer_service_ui, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-10-01). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/zm110110/customer_service_ui
- Repository: https://github.com/zm110110/customer_service_ui

## Overview

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: [`apps/customer-service-frontend/src/components/CustomerServiceChat.vue`](https://github.com/zm110110/customer_service_ui/blob/main/apps/customer-service-frontend/src/components/CustomerServiceChat.vue) (Chat UI), [`apps/customer-service-frontend/src/index.js`](https://github.com/zm110110/customer_service_ui/blob/main/apps/customer-service-frontend/src/index.js) (SDK Initializer), [`apps/customer-service-frontend/src/App.vue`](https://github.com/zm110110/customer_service_ui/blob/main/apps/customer-service-frontend/src/App.vue) (SDK Demo Page), [`apps/customer-service-frontend/src/components/CustomerServiceLauncher.vue`](https://github.com/zm110110/customer_service_ui/blob/main/apps/customer-service-frontend/src/components/CustomerServiceLauncher.vue) (Floating Launcher)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_sdk["Embeddable SDK"]
  node_sdk_init["SDK Initializer<br/>[index.js]"]
  node_launcher["Floating Launcher"]
end

subgraph group_chat["Chat Runtime"]
  node_chat_ui["Chat UI"]
  node_sse["SSE and Node Parser<br/>[sse.js]"]
end

subgraph group_demo["SDK Demo"]
  node_demo_page["SDK Demo Page<br/>[App.vue]"]
end

subgraph group_admin["Operations Console"]
  node_ticket_console["Ticket Monitor<br/>[App.vue]"]
end

node_host(("Host Page"))
node_agent_api{{"Agent API"}}
node_human_support{{"Human Support System"}}
node_operator(("Operations Staff"))

node_host -->|"initializes"| node_sdk_init
node_sdk_init -->|"mounts floating"| node_launcher
node_sdk_init -->|"mounts inline"| node_chat_ui
node_launcher -->|"renders"| node_chat_ui
node_chat_ui -->|"parses stream"| node_sse
node_chat_ui -->|"requests stream"| node_agent_api
node_agent_api -->|"streams replies"| node_chat_ui
node_chat_ui -->|"delegates handoff"| node_human_support
node_human_support -->|"pushes replies"| node_chat_ui
node_demo_page -->|"demonstrates"| node_chat_ui
node_demo_page -->|"uses parser"| node_sse
node_operator -->|"monitors tickets"| node_ticket_console

click node_sdk_init "https://github.com/zm110110/customer_service_ui/blob/main/apps/customer-service-frontend/src/index.js"
click node_launcher "https://github.com/zm110110/customer_service_ui/blob/main/apps/customer-service-frontend/src/components/CustomerServiceLauncher.vue"
click node_chat_ui "https://github.com/zm110110/customer_service_ui/blob/main/apps/customer-service-frontend/src/components/CustomerServiceChat.vue"
click node_sse "https://github.com/zm110110/customer_service_ui/blob/main/apps/customer-service-frontend/src/utils/sse.js"
click node_demo_page "https://github.com/zm110110/customer_service_ui/blob/main/apps/customer-service-frontend/src/App.vue"
click node_ticket_console "https://github.com/zm110110/customer_service_ui/blob/main/apps/customer-service-admin/src/App.vue"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_sdk_init,node_launcher toneBlue
class node_chat_ui,node_sse toneAmber
class node_demo_page,node_agent_api toneMint
class node_ticket_console toneRose
class node_host,node_human_support,node_operator toneIndigo
```

## Components

### Embeddable SDK

- [SDK Initializer](https://github.com/zm110110/customer_service_ui/blob/main/apps/customer-service-frontend/src/index.js): `apps/customer-service-frontend/src/index.js`
- [Floating Launcher](https://github.com/zm110110/customer_service_ui/blob/main/apps/customer-service-frontend/src/components/CustomerServiceLauncher.vue): `apps/customer-service-frontend/src/components/CustomerServiceLauncher.vue`

### Chat Runtime

- [Chat UI](https://github.com/zm110110/customer_service_ui/blob/main/apps/customer-service-frontend/src/components/CustomerServiceChat.vue): `apps/customer-service-frontend/src/components/CustomerServiceChat.vue`
- [SSE and Node Parser](https://github.com/zm110110/customer_service_ui/blob/main/apps/customer-service-frontend/src/utils/sse.js): `apps/customer-service-frontend/src/utils/sse.js`

### SDK Demo

- [SDK Demo Page](https://github.com/zm110110/customer_service_ui/blob/main/apps/customer-service-frontend/src/App.vue): `apps/customer-service-frontend/src/App.vue`

### Operations Console

- [Ticket Monitor](https://github.com/zm110110/customer_service_ui/blob/main/apps/customer-service-admin/src/App.vue): `apps/customer-service-admin/src/App.vue`

### Other components

- **Host Page**
- **Agent API**
- **Human Support System**
- **Operations Staff**

## Connections

- Host Page → SDK Initializer: initializes (evidence: `apps/customer-service-frontend/src/index.js`)
- SDK Initializer → Floating Launcher: mounts floating (evidence: `apps/customer-service-frontend/src/index.js`)
- SDK Initializer → Chat UI: mounts inline (evidence: `apps/customer-service-frontend/src/index.js`)
- Floating Launcher → Chat UI: renders (evidence: `apps/customer-service-frontend/src/components/CustomerServiceLauncher.vue`)
- Chat UI → SSE and Node Parser: parses stream (evidence: `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 (evidence: `apps/customer-service-frontend/src/App.vue`)
- SDK Demo Page → SSE and Node Parser: uses parser (evidence: `apps/customer-service-frontend/src/App.vue`)
- Operations Staff → Ticket Monitor: monitors tickets (evidence: `README.md`)