Legal Chat Demo

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

Quick Start

1. Start the server:

npx serve demo

1. 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:

npm run demo:server

1. Run a specific scenario:

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