Zahar
ec3c7320d7
- Added a Chatbot component to the dashboard for user interaction and support. - Created a README for the Chatbot detailing setup, features, and usage instructions. - Introduced environment variables for secure API key management. - Updated app.js to include the Chatbot component. - Implemented a configuration server to serve API keys securely. - Enhanced styles for the Chatbot interface to improve user experience.
131 lines
4.3 KiB
Markdown
131 lines
4.3 KiB
Markdown
# CityPulse Dashboard Chatbot
|
|
|
|
This dashboard includes an AI-powered chatbot that uses OpenRouter's API to provide assistance with dashboard features and city reporting questions.
|
|
|
|
## Features
|
|
|
|
- **AI Assistant**: Powered by x-ai/grok-4-fast:free model via OpenRouter
|
|
- **Interactive Chat**: Real-time conversation with typing indicators
|
|
- **Quick Actions**: Pre-defined questions for common help topics
|
|
- **Mobile Responsive**: Works on desktop and mobile devices
|
|
- **Context Aware**: Understands CityPulse dashboard functionality
|
|
- **Secure API Key Management**: No hardcoded API keys in frontend code
|
|
|
|
## Setup
|
|
|
|
### 1. **Environment Variables**
|
|
Create a `.env` file in the dashboard directory:
|
|
```env
|
|
OPENROUTER_API_KEY=your_api_key_here
|
|
OPENROUTER_BASE_URL=https://openrouter.ai/api/v1
|
|
OPENROUTER_MODEL=x-ai/grok-4-fast:free
|
|
```
|
|
|
|
### 2. **Get API Key**
|
|
Sign up at [OpenRouter](https://openrouter.ai/) to get your free API key.
|
|
|
|
### 3. **Install Dependencies**
|
|
```bash
|
|
cd dashboard
|
|
npm install
|
|
```
|
|
|
|
### 4. **Setup API Key (Development)**
|
|
```bash
|
|
npm run setup
|
|
```
|
|
This script safely injects your API key from the `.env` file into the frontend code.
|
|
|
|
### 5. **Start Development Server**
|
|
```bash
|
|
npm run dev
|
|
```
|
|
Or manually:
|
|
```bash
|
|
npm run setup && python -m http.server 3000
|
|
```
|
|
|
|
## Usage
|
|
|
|
- Click the floating chat button (💬) in the bottom-right corner to open the chatbot
|
|
- Type your questions or use the quick action buttons for common queries
|
|
- The chatbot can help with:
|
|
- Dashboard navigation and features
|
|
- Understanding report statuses and categories
|
|
- General questions about city reporting
|
|
- Troubleshooting dashboard issues
|
|
|
|
## Quick Actions Available
|
|
|
|
- **Dashboard Help**: How to use dashboard filters
|
|
- **Report Status**: What different report statuses mean
|
|
- **Categories**: Types of city issues that can be reported
|
|
- **Navigation**: How to navigate to specific locations on the map
|
|
|
|
## Security Features
|
|
|
|
### 🔒 **No Hardcoded API Keys**
|
|
- API keys are never hardcoded in the frontend JavaScript
|
|
- Keys are loaded from environment variables at runtime
|
|
- Build-time replacement ensures keys aren't exposed in source code
|
|
|
|
### 🛡️ **Development vs Production**
|
|
- **Development**: Uses environment variables with build-time replacement
|
|
- **Production**: Should use a secure backend endpoint to serve configuration
|
|
|
|
### 🔧 **Backend Configuration Server (Optional)**
|
|
For enhanced security, you can run the included Python server:
|
|
```bash
|
|
pip install flask flask-cors python-dotenv
|
|
python server.py
|
|
```
|
|
This serves configuration from `http://localhost:3001/api/chatbot-config`
|
|
|
|
## Technical Details
|
|
|
|
- Built with React and modern JavaScript
|
|
- Uses OpenRouter API for AI responses
|
|
- Styled to match the CityPulse dashboard theme
|
|
- Includes error handling and loading states
|
|
- Mobile-responsive design
|
|
- Secure API key management
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
dashboard/
|
|
├── .env # Environment variables (create this)
|
|
├── Chatbot.js # Main chatbot component
|
|
├── app.js # Dashboard application
|
|
├── index.html # Main HTML file
|
|
├── styles.css # Styling
|
|
├── server.py # Optional backend config server
|
|
├── replace-env-vars.js # Development API key injection
|
|
├── package.json # Node.js dependencies
|
|
└── requirements.txt # Python dependencies
|
|
```
|
|
|
|
## Troubleshooting
|
|
|
|
If the chatbot isn't working:
|
|
|
|
1. **Check API Key**: Ensure your OpenRouter API key is valid and has credits
|
|
2. **Environment Setup**: Make sure `.env` file exists with correct variables
|
|
3. **Run Setup**: Execute `npm run setup` to inject the API key
|
|
4. **Check Console**: Look for error messages in browser developer tools
|
|
5. **Network Check**: Verify internet connection for API calls
|
|
|
|
### Common Issues
|
|
|
|
- **"API key not configured"**: Run `npm run setup` to inject the key
|
|
- **CORS errors**: Make sure the server is running from the correct directory
|
|
- **404 errors**: Check that all files are in the dashboard directory
|
|
|
|
## Security Best Practices
|
|
|
|
1. **Never commit API keys** to version control
|
|
2. **Use environment variables** for all sensitive configuration
|
|
3. **Consider backend services** for production deployments
|
|
4. **Rotate API keys** regularly
|
|
5. **Monitor API usage** on OpenRouter dashboard
|