- Add Specialist Magic Links
- correction of some bugs: - dynamic fields for adding documents / urls to dossier catalog - tabs in latest bootstrap version no longer functional - partner association of license tier not working when no partner selected - data-type dynamic field needs conversion to isoformat - Add public tables to env.py of tenant schema
This commit is contained in:
@@ -2,11 +2,12 @@
|
||||
|
||||
## Overview
|
||||
|
||||
The Evie Chat Client is a modern, customizable chat interface for interacting with eveai specialists. It supports both anonymous and authenticated modes, with initial focus on anonymous mode. The client provides real-time interaction with AI specialists, customizable tenant branding, and European-compliant analytics tracking.
|
||||
The Evie Chat Client is a modern, customizable chat interface for interacting with eveai specialists. It supports both anonymous and authenticated modes, with initial focus on anonymous mode. The client provides real-time interaction with AI specialists, customizable tenant branding, European-compliant analytics tracking, and secure QR code access.
|
||||
|
||||
## Key Features
|
||||
|
||||
- **Anonymous Mode**: Public access with tenant UUID and API key authentication
|
||||
- **QR Code Access**: Secure pre-authenticated landing pages for QR code integration
|
||||
- **Real-time Communication**: Server-Sent Events (SSE) for live updates and intermediate states
|
||||
- **Tenant Customization**: Simple CSS variable-based theming with visual editor
|
||||
- **Multiple Choice Options**: Dynamic button/dropdown responses from specialists
|
||||
@@ -16,38 +17,97 @@ The Evie Chat Client is a modern, customizable chat interface for interacting wi
|
||||
|
||||
## Architecture
|
||||
|
||||
### Component Structure
|
||||
### Project Structure
|
||||
|
||||
```
|
||||
eveai_chat_client/
|
||||
├── app.py # Flask app entry point
|
||||
├── routes/
|
||||
│ ├── __init__.py
|
||||
│ ├── chat_routes.py # Main chat interface routes
|
||||
│ └── api_routes.py # SSE/API endpoints
|
||||
├── services/
|
||||
│ ├── chat_service.py # Chat session management
|
||||
│ ├── specialist_service.py # Specialist interaction wrapper
|
||||
│ └── tenant_service.py # Tenant config & theming
|
||||
├── templates/
|
||||
│ ├── base.html # Base template
|
||||
│ ├── chat.html # Main chat interface
|
||||
│ └── components/
|
||||
│ ├── message.html # Individual message component
|
||||
│ ├── options.html # Multiple choice options
|
||||
│ └── thinking.html # Intermediate states display
|
||||
└── utils/
|
||||
├── auth.py # API key validation
|
||||
└── tracking.py # Umami analytics integration
|
||||
evie-project/
|
||||
├── common/ # Shared code across components
|
||||
│ ├── services/ # Reusable business logic
|
||||
│ │ ├── chat_service.py # Chat session management
|
||||
│ │ ├── specialist_service.py # Specialist interaction wrapper
|
||||
│ │ ├── tenant_service.py # Tenant config & theming
|
||||
│ │ └── qr_service.py # QR code session management
|
||||
│ └── utils/ # Utility functions
|
||||
│ ├── auth.py # API key validation
|
||||
│ ├── tracking.py # Umami analytics integration
|
||||
│ └── qr_utils.py # QR code generation utilities
|
||||
├── eveai_chat_client/ # Chat client component
|
||||
│ ├── app.py # Flask app entry point
|
||||
│ ├── routes/
|
||||
│ │ ├── __init__.py
|
||||
│ │ ├── chat_routes.py # Main chat interface routes
|
||||
│ │ ├── api_routes.py # SSE/API endpoints
|
||||
│ │ └── qr_routes.py # QR code landing pages
|
||||
│ └── templates/
|
||||
│ ├── base.html # Base template
|
||||
│ ├── chat.html # Main chat interface
|
||||
│ ├── qr_expired.html # QR code error page
|
||||
│ └── components/
|
||||
│ ├── message.html # Individual message component
|
||||
│ ├── options.html # Multiple choice options
|
||||
│ └── thinking.html # Intermediate states display
|
||||
└── eveai_app/ # Admin interface (existing)
|
||||
└── qr_management/ # QR code creation interface
|
||||
├── create_qr.py
|
||||
└── qr_templates.html
|
||||
```
|
||||
|
||||
### Integration Approach
|
||||
|
||||
- **Services Layer**: Direct integration with existing eveai services (not API) for better performance
|
||||
- **Services Layer**: Direct integration with common/services for better performance
|
||||
- **Database**: Utilizes existing ChatSession and Interaction models
|
||||
- **Caching**: Leverages existing Redis setup
|
||||
- **Static Files**: Uses existing nginx/static structure
|
||||
|
||||
## QR Code Access Flow
|
||||
|
||||
### QR Code System Architecture
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant Admin as Admin (eveai_app)
|
||||
participant QRService as QR Service (common)
|
||||
participant PublicDB as Public Schema
|
||||
participant TenantDB as Tenant Schema
|
||||
participant User as End User
|
||||
participant ChatClient as Chat Client
|
||||
participant ChatSession as Chat Session
|
||||
|
||||
%% QR Code Creation Flow
|
||||
Admin->>QRService: Create QR code with specialist config
|
||||
QRService->>PublicDB: Store qr_lookup (qr_id → tenant_code)
|
||||
QRService->>TenantDB: Store qr_sessions (full config + args)
|
||||
QRService->>Admin: Return QR code image with /qr/{qr_id}
|
||||
|
||||
%% QR Code Usage Flow
|
||||
User->>ChatClient: Scan QR → GET /qr/{qr_id}
|
||||
ChatClient->>PublicDB: Lookup tenant_code by qr_id
|
||||
ChatClient->>TenantDB: Get full QR session data
|
||||
ChatClient->>ChatSession: Create ChatSession with pre-filled args
|
||||
ChatClient->>User: Set temp auth + redirect to chat interface
|
||||
User->>ChatClient: Access chat with pre-authenticated session
|
||||
```
|
||||
|
||||
### QR Code Data Flow
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A[Admin Creates QR Code] --> B[Generate UUID for QR Session]
|
||||
B --> C[Store Lookup in Public Schema]
|
||||
C --> D[Store Full Data in Tenant Schema]
|
||||
D --> E[Generate QR Code Image]
|
||||
|
||||
F[User Scans QR Code] --> G[Extract QR Session ID from URL]
|
||||
G --> H[Lookup Tenant Code in Public Schema]
|
||||
H --> I[Retrieve Full QR Data from Tenant Schema]
|
||||
I --> J{QR Valid & Not Expired?}
|
||||
J -->|No| K[Show Error Page]
|
||||
J -->|Yes| L[Create ChatSession with Pre-filled Args]
|
||||
L --> M[Set Temporary Browser Authentication]
|
||||
M --> N[Redirect to Chat Interface]
|
||||
N --> O[Start Chat with Specialist]
|
||||
```
|
||||
|
||||
## URL Structure & Parameters
|
||||
|
||||
### Main Chat Interface
|
||||
@@ -56,35 +116,141 @@ GET /chat/{tenant_code}/{specialist_id}
|
||||
```
|
||||
|
||||
**Query Parameters:**
|
||||
- `api_key` (required): Tenant API key for authentication
|
||||
- `api_key` (required for direct access): Tenant API key for authentication
|
||||
- `session` (optional): Existing chat session ID
|
||||
- `utm_source`, `utm_campaign`, `utm_medium` (optional): Analytics tracking
|
||||
- Other tracking parameters as needed
|
||||
|
||||
**Example:**
|
||||
**Examples:**
|
||||
```
|
||||
# Direct access
|
||||
/chat/550e8400-e29b-41d4-a716-446655440000/document-analyzer?api_key=xxx&utm_source=email
|
||||
|
||||
# QR code access (after redirect)
|
||||
/chat/550e8400-e29b-41d4-a716-446655440000/document-analyzer?session=abc123-def456
|
||||
```
|
||||
|
||||
### QR Code Landing Pages
|
||||
```
|
||||
GET /qr/{qr_session_id} # QR code entry point (redirects, no HTML page)
|
||||
```
|
||||
|
||||
### API Endpoints
|
||||
```
|
||||
POST /api/chat/{tenant_code}/interact # Send message to specialist
|
||||
POST /api/chat/{tenant_code}/interact # Send message to specialist
|
||||
GET /api/chat/{tenant_code}/status/{session_id} # SSE endpoint for updates
|
||||
GET /api/tenant/{tenant_code}/theme.css # Dynamic tenant CSS (if needed)
|
||||
```
|
||||
|
||||
## Authentication & Security
|
||||
|
||||
### Anonymous Mode
|
||||
- **Tenant Identification**: UUID-based tenant codes (not sequential IDs)
|
||||
- **API Key Validation**: Required for all anonymous interactions
|
||||
- **Rate Limiting**: Implement per-tenant/IP rate limiting
|
||||
- **Input Validation**: Sanitize all user inputs and parameters
|
||||
### Anonymous Mode Access Methods
|
||||
|
||||
1. **Direct Access**: URL with API key parameter
|
||||
2. **QR Code Access**: Pre-authenticated via secure landing page
|
||||
|
||||
### QR Code Security Model
|
||||
- **QR Code Contains**: Only a UUID session identifier
|
||||
- **Sensitive Data**: Stored securely in tenant database schema
|
||||
- **Usage Control**: Configurable expiration and usage limits
|
||||
- **Audit Trail**: Track QR code creation and usage
|
||||
|
||||
### Security Considerations
|
||||
- Use tenant UUIDs to prevent enumeration attacks
|
||||
- Validate API keys against tenant database
|
||||
- Implement CORS policies for cross-origin requests
|
||||
- Sanitize all user messages and file uploads
|
||||
- QR sessions have configurable expiration and usage limits
|
||||
|
||||
## QR Code Management
|
||||
|
||||
### Database Schema
|
||||
|
||||
#### Public Schema (Routing Only)
|
||||
```sql
|
||||
CREATE TABLE qr_lookup (
|
||||
qr_session_id UUID PRIMARY KEY,
|
||||
tenant_code UUID NOT NULL,
|
||||
created_at TIMESTAMP DEFAULT NOW(),
|
||||
INDEX idx_tenant_code (tenant_code)
|
||||
);
|
||||
```
|
||||
|
||||
#### Tenant Schema (Full QR Data)
|
||||
```sql
|
||||
CREATE TABLE qr_sessions (
|
||||
id UUID PRIMARY KEY,
|
||||
specialist_id UUID NOT NULL,
|
||||
api_key VARCHAR(255) NOT NULL,
|
||||
specialist_args JSONB,
|
||||
metadata JSONB,
|
||||
created_at TIMESTAMP DEFAULT NOW(),
|
||||
expires_at TIMESTAMP,
|
||||
usage_count INTEGER DEFAULT 0,
|
||||
usage_limit INTEGER,
|
||||
created_by_user_id UUID
|
||||
);
|
||||
```
|
||||
|
||||
### QR Code Creation (eveai_app)
|
||||
```python
|
||||
# In eveai_app admin interface
|
||||
from common.services.qr_service import QRService
|
||||
|
||||
def create_specialist_qr_code():
|
||||
qr_data = {
|
||||
'tenant_code': current_tenant.code,
|
||||
'specialist_id': selected_specialist.id,
|
||||
'api_key': current_tenant.api_key,
|
||||
'specialist_args': {
|
||||
'department': 'sales',
|
||||
'language': 'en',
|
||||
'context': 'product_inquiry'
|
||||
},
|
||||
'metadata': {
|
||||
'name': 'Sales Support QR - Product Brochure',
|
||||
'usage_limit': 500,
|
||||
'expires_days': 90
|
||||
}
|
||||
}
|
||||
|
||||
qr_service = QRService()
|
||||
qr_session_id, qr_image = qr_service.create_qr_session(qr_data)
|
||||
return qr_image
|
||||
```
|
||||
|
||||
### QR Code Processing (eveai_chat_client)
|
||||
```python
|
||||
# In eveai_chat_client routes
|
||||
from common.services.qr_service import QRService
|
||||
from common.services.chat_service import ChatService
|
||||
|
||||
@app.route('/qr/<qr_session_id>')
|
||||
def handle_qr_code(qr_session_id):
|
||||
qr_service = QRService()
|
||||
qr_data = qr_service.get_and_validate_qr_session(qr_session_id)
|
||||
|
||||
if not qr_data:
|
||||
return render_template('qr_expired.html'), 410
|
||||
|
||||
# Create ChatSession with pre-filled arguments
|
||||
chat_service = ChatService()
|
||||
chat_session = chat_service.create_session(
|
||||
tenant_code=qr_data['tenant_code'],
|
||||
specialist_id=qr_data['specialist_id'],
|
||||
initial_args=qr_data['specialist_args'],
|
||||
source='qr_code'
|
||||
)
|
||||
|
||||
# Set temporary authentication
|
||||
flask_session['qr_auth'] = {
|
||||
'tenant_code': qr_data['tenant_code'],
|
||||
'api_key': qr_data['api_key'],
|
||||
'chat_session_id': chat_session.id,
|
||||
'expires_at': datetime.utcnow() + timedelta(hours=24)
|
||||
}
|
||||
|
||||
# Redirect to chat interface
|
||||
return redirect(f"/chat/{qr_data['tenant_code']}/{qr_data['specialist_id']}?session={chat_session.id}")
|
||||
```
|
||||
|
||||
## Real-time Communication
|
||||
|
||||
@@ -185,11 +351,12 @@ def render_options(options_list):
|
||||
- **European Hosting**: Self-hosted Umami instance
|
||||
- **Privacy Compliant**: No cookies, GDPR compliant by design
|
||||
- **Tracking Events**:
|
||||
- Chat session start
|
||||
- Chat session start (including QR code source)
|
||||
- Message sent
|
||||
- Option selected
|
||||
- Session duration
|
||||
- Specialist interaction completion
|
||||
- QR code usage
|
||||
|
||||
### Tracking Implementation
|
||||
```javascript
|
||||
@@ -199,6 +366,14 @@ function trackEvent(eventName, eventData) {
|
||||
umami.track(eventName, eventData);
|
||||
}
|
||||
}
|
||||
|
||||
// Track QR code usage
|
||||
function trackQRUsage(qrSessionId, tenantCode) {
|
||||
trackEvent('qr_code_used', {
|
||||
qr_session_id: qrSessionId,
|
||||
tenant_code: tenantCode
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
## File Upload Support (Future)
|
||||
@@ -219,20 +394,40 @@ function trackEvent(eventName, eventData) {
|
||||
## Development Guidelines
|
||||
|
||||
### Code Organization
|
||||
- Follow existing eveai project structure and conventions
|
||||
- Use existing common/services and common/utils where applicable
|
||||
- Maintain multi-tenant data isolation
|
||||
- Implement proper error handling and logging
|
||||
- **Services**: Place reusable business logic in `common/services/`
|
||||
- **Utils**: Place utility functions in `common/utils/`
|
||||
- **Multi-tenant**: Maintain data isolation using existing patterns
|
||||
- **Error Handling**: Implement proper error handling and logging
|
||||
|
||||
### Service Layer Examples
|
||||
```python
|
||||
# common/services/qr_service.py
|
||||
class QRService:
|
||||
def create_qr_session(self, qr_data):
|
||||
# Create QR session with hybrid storage approach
|
||||
pass
|
||||
|
||||
def get_and_validate_qr_session(self, qr_session_id):
|
||||
# Validate and retrieve QR session data
|
||||
pass
|
||||
|
||||
# common/services/chat_service.py
|
||||
class ChatService:
|
||||
def create_session(self, tenant_code, specialist_id, initial_args=None, source='direct'):
|
||||
# Create chat session with optional pre-filled arguments
|
||||
pass
|
||||
```
|
||||
|
||||
### Testing Strategy
|
||||
- Unit tests for services and utilities
|
||||
- Integration tests for chat flow
|
||||
- Unit tests for services and utilities in `common/`
|
||||
- Integration tests for chat flow including QR code access
|
||||
- UI tests for theme customization
|
||||
- Load testing for SSE connections
|
||||
- Cross-browser compatibility testing
|
||||
|
||||
### Performance Considerations
|
||||
- Cache tenant configurations in Redis
|
||||
- Cache QR session lookups in Redis
|
||||
- Optimize SSE connection management
|
||||
- Implement connection pooling for database
|
||||
- Use CDN for static assets
|
||||
@@ -251,6 +446,7 @@ function trackEvent(eventName, eventData) {
|
||||
- Celery integration (existing)
|
||||
- PostgreSQL and Redis (existing)
|
||||
- Umami analytics client library
|
||||
- QR code generation library (qrcode)
|
||||
|
||||
## Future Enhancements
|
||||
|
||||
@@ -274,6 +470,8 @@ function trackEvent(eventName, eventData) {
|
||||
CHAT_CLIENT_PORT=5000
|
||||
TENANT_API_VALIDATION_CACHE_TTL=3600
|
||||
SSE_CONNECTION_TIMEOUT=300
|
||||
QR_SESSION_DEFAULT_EXPIRY_DAYS=30
|
||||
QR_SESSION_MAX_USAGE_LIMIT=1000
|
||||
UMAMI_WEBSITE_ID=your-website-id
|
||||
UMAMI_SCRIPT_URL=https://your-umami.domain/script.js
|
||||
```
|
||||
@@ -293,4 +491,26 @@ UMAMI_SCRIPT_URL=https://your-umami.domain/script.js
|
||||
}
|
||||
```
|
||||
|
||||
This documentation provides a comprehensive foundation for developing the Evie Chat Client while maintaining consistency with the existing eveai architecture and meeting the specific requirements for anonymous mode interactions with customizable tenant branding.
|
||||
### Sample QR Session Data
|
||||
```json
|
||||
{
|
||||
"id": "550e8400-e29b-41d4-a716-446655440000",
|
||||
"tenant_code": "123e4567-e89b-12d3-a456-426614174000",
|
||||
"specialist_id": "789e0123-e45f-67g8-h901-234567890123",
|
||||
"api_key": "tenant_api_key_here",
|
||||
"specialist_args": {
|
||||
"department": "technical_support",
|
||||
"product_category": "software",
|
||||
"priority": "high",
|
||||
"language": "en"
|
||||
},
|
||||
"metadata": {
|
||||
"name": "Technical Support QR - Software Issues",
|
||||
"created_by": "admin_user_id",
|
||||
"usage_limit": 100,
|
||||
"expires_at": "2025-09-01T00:00:00Z"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
This documentation provides a comprehensive foundation for developing the Evie Chat Client with secure QR code integration while maintaining consistency with the existing eveai multi-tenant architecture.
|
||||
Reference in New Issue
Block a user