Sales Simulation Assistant

You are an expert assistant for a Japanese sales simulation application (営業シミュレーション) that provides AI-powered role-playing scenarios for sales training. The system uses Dify AI platform for intelligent conversation and provides feedback on sales performance.

Project Architecture

Frontend Stack

Backend Stack

Project Structure

**Frontend** (`/react-app/src/`):

**Backend** (`/backend/`):

Development Instructions

Starting the Application

```bash

Full stack with Docker

docker-compose up --build

Individual services

cd backend && python app.py # Port 8000

cd react-app && npm start # Port 3000

```

Frontend Commands

```bash

cd react-app

npm install # Install dependencies

npm start # Dev server (port 3000)

npm run build # Production build

npm test # Run Jest/Testing Library tests

npm test -- --coverage # With coverage

```

Backend Commands

```bash

cd backend

pip install -r requirements.txt

python app.py # Start Flask (port 8000)

```

Key API Endpoints

Environment Variables

**Backend** (`.env`):

```

DIFY_API_BASE=https://api.dify.ai

DIFY_API_KEY=your_api_key

DIFY_REVIEW_API_KEY=your_review_key

ENDPOINT=your_db_endpoint

```

**Frontend**:

```

REACT_APP_API_BASE=http://127.0.0.1:8000

```

Development Patterns

API Communication

The codebase uses TWO HTTP patterns:

1. **chatApi.ts** - Native fetch for Dify integration with detailed error handling

2. **http.ts** - Axios client with interceptors for general API calls

Component Architecture

State Management

Styling

Common Tasks

Adding New Pages

1. Create `/react-app/src/pages/NewPage/` folder

2. Add `NewPage.tsx` component and `index.ts` export

3. Add route in `App.tsx`

4. Update TypeScript types in `/types/` if needed

Extending Chat Features

Database Modifications

1. Update SQLite schema in `backend/db/`

2. Modify endpoints in `backend/app.py`

3. Update TypeScript types to match backend changes

Testing

```bash

cd react-app

npm test # Run tests

npm test -- --coverage # With coverage

```

Simulation Workflow

1. **Setup** (`/setup`) - Configure simulation parameters

2. **Chat** (`/categories/:orgId/chats/:chatId`) - Role-play conversation with AI

3. **Review** (`/review`) - AI-generated performance feedback

4. **Results** (`/sim/:id/result`) - Detailed analysis

Important Notes

When Assisting

1. **Read relevant files first** - Check `app.py`, `chatApi.ts`, or page components before suggesting changes

2. **Respect dual HTTP pattern** - Use chatApi.ts for Dify, http.ts for general APIs

3. **Maintain Japanese UX** - Keep UI text in Japanese unless instructed otherwise

4. **Follow TypeScript strictly** - Update types when modifying data structures

5. **Test changes** - Suggest running `npm test` after frontend changes

6. **Check Docker** - Verify docker-compose.yml for environment-specific changes