# Leah Chat Widget — No More Chores

AI-powered chat widget featuring Leah, the virtual receptionist for No More Chores. Pure vanilla JS, no dependencies, under 20KB.

## Files

| File | Purpose |
|------|---------|
| `leah-widget.js` | Embeddable frontend widget (12KB) |
| `chat-backend.js` | Twilio Serverless function (backend) |
| `preview.html` | Local test/preview page |

---

## 1. Deploy the Backend

The backend runs as a Twilio Serverless function. Deploy to the existing Twilio service.

### Prerequisites
- Twilio CLI installed (`npm i -g twilio-cli`)
- Serverless plugin (`twilio plugins:install @twilio-labs/plugin-serverless`)
- `ANTHROPIC_API_KEY` environment variable set in the Twilio service

### Steps

1. **Copy the function to your Twilio service directory:**
   ```bash
   cp chat-backend.js /path/to/your/twilio-service/functions/chat.js
   ```
   The filename becomes the endpoint path: `/chat`

2. **Set the environment variable** (if not already set):
   ```bash
   # In the Twilio Console:
   # Go to Functions & Assets > Services > your service (ZS46e8a58afad9a49742ddbbe2e3d60bbe)
   # Environment Variables > Add ANTHROPIC_API_KEY
   ```

3. **Deploy:**
   ```bash
   cd /path/to/your/twilio-service
   twilio serverless:deploy
   ```

4. **Note the function URL** — it will look like:
   ```
   https://your-service-1234.twil.io/chat
   ```

### Alternative: Deploy via Twilio Console

1. Go to [Twilio Console > Functions & Assets > Services](https://console.twilio.com/us1/develop/functions/services)
2. Open service `ZS46e8a58afad9a49742ddbbe2e3d60bbe`
3. Click **Add +** > **Add Function** > name it `/chat`
4. Paste the contents of `chat-backend.js`
5. Set visibility to **Public**
6. Ensure `ANTHROPIC_API_KEY` is in Environment Variables
7. Click **Deploy All**

---

## 2. Embed the Widget on WordPress

Add this single line to your WordPress site. Best place: **Appearance > Theme Editor > footer.php** (before `</body>`), or use a plugin like "Insert Headers and Footers".

```html
<script src="https://your-cdn-or-host.com/leah-widget.js" data-api-url="https://your-service-1234.twil.io/chat"></script>
```

### Configuration

| Attribute | Required | Description |
|-----------|----------|-------------|
| `data-api-url` | Yes | Full URL to your deployed `/chat` Twilio function |

### Hosting the Widget JS

Options for hosting `leah-widget.js`:
- **WordPress Media Library** — Upload as a file (may need a plugin to allow .js uploads)
- **Twilio Assets** — Upload to the same Twilio service as a public asset
- **CDN** — Host on any CDN (Cloudflare, AWS S3, etc.)
- **Same server** — Place in your WordPress theme directory

**Recommended:** Upload to Twilio as a public asset alongside the function. Then both the widget and backend share the same domain.

---

## 3. Preview Locally

Open the preview page in a browser:

```
http://100.68.175.57:8765/projects/chat-widget/preview.html
```

The preview page simulates a No More Chores landing page with the widget loaded. Without a `data-api-url`, the chat UI works but sending messages will show the fallback error message (expected behavior).

To test with the live backend, update the `data-api-url` in `preview.html`:
```html
<script src="leah-widget.js" data-api-url="https://your-service-1234.twil.io/chat"></script>
```

---

## Features

- Floating chat bubble (bottom-right corner)
- Smooth open/close animation
- Full conversation history (persisted in sessionStorage)
- Typing indicator while AI responds
- Mobile responsive (full-screen on small devices)
- Auto-resizing text input
- Keyboard support (Enter to send, Escape to close)
- Error handling with fallback contact info
- Zero external dependencies
- ~12KB widget + ~6KB backend

## Customization

### Colors
The brand color `#4A90D9` is used throughout. To change it, find-and-replace in `leah-widget.js`:
- `#4A90D9` — primary color
- `#357ABD` — darker shade (hover states, gradients)
- `#b0c8e8` — disabled state

### Greeting Message
Edit the `GREETING` variable in `leah-widget.js`.

### Leah's Personality
Edit the `SYSTEM_PROMPT` in `chat-backend.js` to adjust how Leah responds.