# Legal Chat Demo

A simple, browser-based demo showcasing three different user flows for a legal chat application.

## Quick Start

1. Start the server:
```bash
npx serve demo
```

2. Open the provided URL in your browser (e.g., http://localhost:52521)

## User Flows

### 1. User Flow
This flow simulates a person seeking legal advice.

Example questions to try:
- "I need help with a landlord dispute"
- "What are my rights as a tenant?"
- "How do I file a police complaint?"
- "Can my employer fire me without notice?"

Expected responses will include:
- Basic legal information
- Rights and responsibilities
- Next steps to take
- Suggestions to seek professional help when needed

### 2. NGO Worker Flow
This flow simulates an NGO worker helping to manage cases.

Example queries to try:
- "What's the process for domestic violence cases?"
- "How do I help someone file for legal aid?"
- "Steps to document a labor rights violation"
- "Protocol for handling sensitive cases"

Expected responses will include:
- Case management procedures
- Documentation requirements
- Referral protocols
- Support service information

### 3. Advocate Flow
This flow simulates a legal advocate handling cases.

Example queries to try:
- "Case precedents for workplace discrimination"
- "Legal framework for property disputes"
- "Recent judgments on tenant rights"
- "Documentation needed for court filing"

Expected responses will include:
- Legal precedents
- Procedural information
- Required documentation
- Case strategy suggestions

## Features

- 💬 Real-time chat interface
- 🔄 Role switching between User, NGO Worker, and Advocate
- ⚡ Instant responses based on role
- 🎨 Modern UI with Tailwind CSS
- 📱 Responsive design

## How to Use

1. **Select a Role**
   - Click on one of the three role buttons at the top
   - The active role is highlighted in blue
   - Each role gets different types of responses

2. **Send Messages**
   - Type your message in the input field
   - Click the "Send" button or press Enter
   - Messages appear in the chat window
   - Responses are tailored to your selected role

3. **View History**
   - Scroll up to view message history
   - Messages are timestamped
   - User messages appear on the right
   - Bot responses appear on the left

## Tips

- Try switching roles to see different perspectives
- Use specific, detailed questions for better responses
- Reference legal terms or specific situations
- Experiment with different types of queries in each role

## Directory Structure

```
demo/
├── data/              # Mock data (users, cases, questions)
├── scenarios/         # Pre-programmed interaction flows
├── mocks/            # Mock API responses
└── scripts/          # Demo runner scripts
```

## Running the Demo

1. Start the demo server:
```bash
npm run demo:server
```

2. Run a specific scenario:
```bash
npm run demo:scenario user-flow
npm run demo:scenario ngo-flow
npm run demo:scenario advocate-flow
```

## Available Scenarios

- `user-flow`: Demonstrates end-user interaction
- `ngo-flow`: Shows NGO worker dashboard and operations
- `advocate-flow`: Presents advocate workflow and case management