# Milestone 1.5 — Chat Bubble UI Learning Guide

This directory documents the implementation of **Milestone 1, Step 1.5: Chat Bubble UI**.

---

## Documents in this folder

- **[01-chat-bubble-ui.md](file:///c:/Users/alokc/chatbot/backend/docs/learning/m1-5-chat-bubble-ui/01-chat-bubble-ui.md)** — Explains the floating chat bubble, chat panel UI shell, toggle state logic, and accessibility features.
- **[02-m1-5-revision.md](file:///c:/Users/alokc/chatbot/backend/docs/learning/m1-5-chat-bubble-ui/02-m1-5-revision.md)** — Revision summary and top 5 Q&As.

---

## How to Verify Milestone 1.5

1. **Build the bundle:**
   ```bash
   cd widget
   npm run build
   ```

2. **Open test harness in browser:**
   Open `widget/demo.html`.
   - Floating circular chat bubble appears at the bottom-right corner.
   - Click bubble $\rightarrow$ Chat panel opens with header, welcome message, and input shell.
   - Click close button (`×`) or bubble $\rightarrow$ Chat panel collapses.
   - Host page red styles do not affect the chat UI.