How andrewnguyen2708/live-chat-widget works
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: Widget.tsx Widget state · ChatWindow.tsx Chat window · ChatView.tsx Conversation view · widget-loader.js Loader script
Components 13
Embedding
- Loader script
production-dist/widget-loader.js - Widget iframe
production-dist/widget-loader.js
Widget orchestration
- React entry
src/index.tsx - Widget state
src/Widget.tsx - Chat data types
src/types/index.ts
Chat interface
- Launcher button
src/components/LauncherButton.tsx - Chat window
src/components/ChatWindow.tsx - Window header
src/components/ChatHeader.tsx - Presale form
src/components/PresaleForm.tsx - Conversation view
src/components/ChatView.tsx - Message bubble
src/components/MessageBubble.tsx
Other components
- Site visitor
- Host website
Connections 14
- Site visitor → Host website: uses site
- Host website → Loader script: loads script
production-dist/widget-loader.js - Loader script → Widget iframe: creates iframe
production-dist/widget-loader.js - Widget iframe → React entry: loads widget
- React entry → Widget state: renders
src/index.tsx - Widget state → Launcher button: renders
src/Widget.tsx - Widget state → Chat window: renders
src/Widget.tsx - Chat window → Window header: renders
src/components/ChatWindow.tsx - Chat window → Presale form: renders
src/components/ChatWindow.tsx - Chat window → Conversation view: renders
src/components/ChatWindow.tsx - Conversation view → Message bubble: renders
src/components/ChatView.tsx - Presale form → Widget state: submits data
src/Widget.tsx - Conversation view → Widget state: sends text
src/Widget.tsx - Widget state → Chat data types: uses models
src/Widget.tsx