LLM-2000 Chat Application
Development rules and structure for the LLM-2000 chat application - a simple chat webapp on top of Ollama with Datadog monitoring.
Application Identity
The application name is "LLM-2000"Use this name consistently in all code, documentation, and UI elementsMaintenance Protocol
This rules file must be kept in sync with codebase changes. Update when:
Adding/removing components or servicesChanging file locations or renaming filesModifying API endpointsAdding new CSS modules or major selectorsChanging data structures or dependenciesRefactoring component relationshipsEach update must maintain:
Accurate file locationsCurrent component relationshipsUp-to-date API documentationCorrect CSS selector referencesConfiguration
Environment Variables
Tracked in `.env` file used in `compose.yml`:
**Datadog Configuration:**
`DD_ENV`: Datadog environment`DD_VERSION`: Application version`DD_SITE`: Datadog site`DD_TAGS`: Datadog tags to add to the agent`DD_APPLICATION_ID`: RUM application ID`NOTIF_EMAIL`: Email address for Datadog notifications**Sensitive Keys:**
`DD_API_KEY`: Datadog API key [sensitive]`DD_APP_KEY`: Datadog application key [sensitive]`DD_CLIENT_TOKEN`: Datadog client token [sensitive]`DATADOG_SECRET_ACCESS_KEY`: Synthetics worker secret [sensitive]`DATADOG_PUBLIC_KEY_PEM`: Synthetics worker public key [sensitive]`DATADOG_PRIVATE_KEY`: Synthetics worker private key [sensitive]Default Files
**System Prompt:**
Location: `flask/default_prompt.txt`Default system prompt for new chatsCan be overridden per user through the UIBackend Architecture
Core Components
**Main Flask Application:**
Location: `flask/app/__init__.py`Handles app configuration, Datadog setup, Redis client initialization**ChatService:**
Location: `flask/app/services/chat_service.py`Core chat logic and Redis operationsManages chat history, prompt management, message streamingAPI Routes
Location: `flask/app/api/routes.py`
`GET /api/chat`: Check chat existence and load history`POST /api/chat`: Send message and get streaming response`DELETE /api/chat`: Clear chat history`GET /api/chat/welcome`: Get streaming welcome message`GET /api/prompt`: Load system prompt`POST /api/prompt`: Save system promptDependencies
**Redis:**
Connection: `REDIS_URL` environment variableData structure: Hash for chat history, String for system promptKeys: `chat:{user_id}` for history, `prompt:{user_id}` for system prompt**Datadog:**
APM tracing on all routesRUM monitoring in frontendLog collection from both frontend and backendFrontend Architecture
Core Components
**ChatUI:**
Location: `flask/app/static/js/ChatUI.js`Handles DOM interactions and visual updatesManages message display, button controls, input handling**ChatManager:**
Location: `flask/app/static/js/ChatManager.js`Core frontend logic and state managementControls chat flow, modal handling, API interactions**ChatService:**
Location: `flask/app/static/js/services/ChatService.js`API communication layerHandles HTTP requests and chat operationsStream Processing
**TokenBuffer:**
Location: `flask/app/static/js/stream/TokenBuffer.js`Handles streaming text buffering and displayEnables smooth text streaming**StreamProcessor:**
Location: `flask/app/static/js/stream/StreamProcessor.js`Processes server-sent events (SSE)Manages token processingStyling Structure
CSS Modules
**Main Styles:**
Location: `flask/app/static/css/main.css`Imports all other CSS modules**Component Styles:**
Location: `flask/app/static/css/components.css`Button styles (`.button`)User info styles (`.user-info`)Chat controls (`.chat-actions`)Message input (`.message-input-container`)**Modal Styles:**
Location: `flask/app/static/css/modal.css`Modal layout (`.modal`)Modal content (`.modal-content`)Form elements (`.form-group`)**Variables:**
Location: `flask/app/static/css/variables.css`Color scheme (`--purple`, `--beige`, etc.)Spacing variablesTypography settingsCSS Debugging Guidelines
Header buttons: 32pxMain buttons: 40pxColor variables in `variables.css` for themingUI Resources
Icons
Location: `flask/app/static/js/icons.js`External: [Remix Icon](https://remixicon.com/) (prefix: `ri-*`)Using fill variants for consistent styleSVG format for better scalingTemplates
**Main Template:**
Location: `flask/app/templates/home.jinja`Contains all modal structuresUser info componentChat interface layoutDebugging Procedures
Redis Data Inspection
Chat history: `HGETALL chat:{user_id}`System prompt: `GET prompt:{user_id}`Stream Processing
Check browser console for token processing logsSSE connections visible in Network tab (DevTools)CSS Debugging
Button sizes: header buttons (32px), main buttons (40px)Color variables in `variables.css` for themingDevelopment Guidelines
1. **Component Creation:** Follow existing structure in `flask/app/static/js/`
2. **Styling:** Add new styles to appropriate CSS module, use variables from `variables.css`
3. **API Endpoints:** Add to `flask/app/api/routes.py` with Datadog tracing
4. **Icons:** Use Remix Icon set with `ri-*` prefix for consistency
5. **Data Storage:** Use Redis with consistent key patterns (`chat:{user_id}`, `prompt:{user_id}`)
6. **Monitoring:** Ensure Datadog tracing on all new routes and RUM events for user interactions
File Structure Reference
```
flask/
├── app/
│ ├── __init__.py # Main Flask app
│ ├── api/
│ │ └── routes.py # API endpoints
│ ├── services/
│ │ └── chat_service.py # Chat logic
│ ├── static/
│ │ ├── css/
│ │ │ ├── main.css
│ │ │ ├── components.css
│ │ │ ├── modal.css
│ │ │ └── variables.css
│ │ └── js/
│ │ ├── ChatUI.js
│ │ ├── ChatManager.js
│ │ ├── icons.js
│ │ ├── services/
│ │ │ └── ChatService.js
│ │ └── stream/
│ │ ├── TokenBuffer.js
│ │ └── StreamProcessor.js
│ └── templates/
│ └── home.jinja # Main template
└── default_prompt.txt # Default system prompt
```