# andrewnguyen2708/live-chat-widget architecture

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

- Interactive diagram: https://gitdiagram.com/andrewnguyen2708/live-chat-widget
- Repository: https://github.com/andrewnguyen2708/live-chat-widget

## Overview

This repository implements an embeddable React live-chat demo. A site visitor opens the widget, submits name and email, then views a simulated conversation and can send messages; the widget keeps session and message state locally. The production loader embeds the UI in an iframe and passes a client key. The excerpts show component calls and state ownership, but no backend or real support-agent integration, so the conversation is represented as simulation rather than an external service.

Main entry points: [`src/Widget.tsx`](https://github.com/andrewnguyen2708/live-chat-widget/blob/master/src/Widget.tsx) (Widget state), [`src/components/ChatWindow.tsx`](https://github.com/andrewnguyen2708/live-chat-widget/blob/master/src/components/ChatWindow.tsx) (Chat window), [`src/components/ChatView.tsx`](https://github.com/andrewnguyen2708/live-chat-widget/blob/master/src/components/ChatView.tsx) (Conversation view), [`production-dist/widget-loader.js`](https://github.com/andrewnguyen2708/live-chat-widget/blob/master/production-dist/widget-loader.js) (Loader script)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_embed["Embedding"]
  node_loader["Loader script<br/>[widget-loader.js]"]
  node_iframe["Widget iframe<br/>[widget-loader.js]"]
end

subgraph group_widget["Widget orchestration"]
  node_entry["React entry<br/>[index.tsx]"]
  node_widget["Widget state<br/>[Widget.tsx]"]
  node_types["Chat data types<br/>[index.ts]"]
end

subgraph group_chat["Chat interface"]
  node_launcher["Launcher button<br/>[LauncherButton.tsx]"]
  node_window["Chat window<br/>[ChatWindow.tsx]"]
  node_header["Window header<br/>[ChatHeader.tsx]"]
  node_presale["Presale form<br/>[PresaleForm.tsx]"]
  node_chatview["Conversation view<br/>[ChatView.tsx]"]
  node_bubble["Message bubble<br/>[MessageBubble.tsx]"]
end

node_visitor(("Site visitor"))
node_host["Host website"]

node_visitor -->|"uses site"| node_host
node_host -->|"loads script"| node_loader
node_loader -->|"creates iframe"| node_iframe
node_iframe -.->|"loads widget"| node_entry
node_entry -->|"renders"| node_widget
node_widget -->|"renders"| node_launcher
node_widget -->|"renders"| node_window
node_window -->|"renders"| node_header
node_window -->|"renders"| node_presale
node_window -->|"renders"| node_chatview
node_chatview -->|"renders"| node_bubble
node_presale -->|"submits data"| node_widget
node_chatview -->|"sends text"| node_widget
node_widget -->|"uses models"| node_types

click node_loader "https://github.com/andrewnguyen2708/live-chat-widget/blob/master/production-dist/widget-loader.js"
click node_iframe "https://github.com/andrewnguyen2708/live-chat-widget/blob/master/production-dist/widget-loader.js"
click node_entry "https://github.com/andrewnguyen2708/live-chat-widget/blob/master/src/index.tsx"
click node_widget "https://github.com/andrewnguyen2708/live-chat-widget/blob/master/src/Widget.tsx"
click node_launcher "https://github.com/andrewnguyen2708/live-chat-widget/blob/master/src/components/LauncherButton.tsx"
click node_window "https://github.com/andrewnguyen2708/live-chat-widget/blob/master/src/components/ChatWindow.tsx"
click node_header "https://github.com/andrewnguyen2708/live-chat-widget/blob/master/src/components/ChatHeader.tsx"
click node_presale "https://github.com/andrewnguyen2708/live-chat-widget/blob/master/src/components/PresaleForm.tsx"
click node_chatview "https://github.com/andrewnguyen2708/live-chat-widget/blob/master/src/components/ChatView.tsx"
click node_bubble "https://github.com/andrewnguyen2708/live-chat-widget/blob/master/src/components/MessageBubble.tsx"
click node_types "https://github.com/andrewnguyen2708/live-chat-widget/blob/master/src/types/index.ts"

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_loader,node_iframe toneBlue
class node_entry,node_widget,node_types toneAmber
class node_launcher,node_window,node_header,node_presale,node_chatview,node_bubble toneMint
class node_visitor,node_host toneIndigo
```

## Components

### Embedding

- [Loader script](https://github.com/andrewnguyen2708/live-chat-widget/blob/master/production-dist/widget-loader.js): `production-dist/widget-loader.js`
- [Widget iframe](https://github.com/andrewnguyen2708/live-chat-widget/blob/master/production-dist/widget-loader.js): `production-dist/widget-loader.js`

### Widget orchestration

- [React entry](https://github.com/andrewnguyen2708/live-chat-widget/blob/master/src/index.tsx): `src/index.tsx`
- [Widget state](https://github.com/andrewnguyen2708/live-chat-widget/blob/master/src/Widget.tsx): `src/Widget.tsx`
- [Chat data types](https://github.com/andrewnguyen2708/live-chat-widget/blob/master/src/types/index.ts): `src/types/index.ts`

### Chat interface

- [Launcher button](https://github.com/andrewnguyen2708/live-chat-widget/blob/master/src/components/LauncherButton.tsx): `src/components/LauncherButton.tsx`
- [Chat window](https://github.com/andrewnguyen2708/live-chat-widget/blob/master/src/components/ChatWindow.tsx): `src/components/ChatWindow.tsx`
- [Window header](https://github.com/andrewnguyen2708/live-chat-widget/blob/master/src/components/ChatHeader.tsx): `src/components/ChatHeader.tsx`
- [Presale form](https://github.com/andrewnguyen2708/live-chat-widget/blob/master/src/components/PresaleForm.tsx): `src/components/PresaleForm.tsx`
- [Conversation view](https://github.com/andrewnguyen2708/live-chat-widget/blob/master/src/components/ChatView.tsx): `src/components/ChatView.tsx`
- [Message bubble](https://github.com/andrewnguyen2708/live-chat-widget/blob/master/src/components/MessageBubble.tsx): `src/components/MessageBubble.tsx`

### Other components

- **Site visitor**
- **Host website**

## Connections

- Site visitor → Host website: uses site
- Host website → Loader script: loads script (evidence: `production-dist/widget-loader.js`)
- Loader script → Widget iframe: creates iframe (evidence: `production-dist/widget-loader.js`)
- Widget iframe → React entry: loads widget
- React entry → Widget state: renders (evidence: `src/index.tsx`)
- Widget state → Launcher button: renders (evidence: `src/Widget.tsx`)
- Widget state → Chat window: renders (evidence: `src/Widget.tsx`)
- Chat window → Window header: renders (evidence: `src/components/ChatWindow.tsx`)
- Chat window → Presale form: renders (evidence: `src/components/ChatWindow.tsx`)
- Chat window → Conversation view: renders (evidence: `src/components/ChatWindow.tsx`)
- Conversation view → Message bubble: renders (evidence: `src/components/ChatView.tsx`)
- Presale form → Widget state: submits data (evidence: `src/Widget.tsx`)
- Conversation view → Widget state: sends text (evidence: `src/Widget.tsx`)
- Widget state → Chat data types: uses models (evidence: `src/Widget.tsx`)