Build full-stack chat archive system with AI categorization and integrations

.env.example

@@ -0,0 +1,18 @@
+# Database Configuration
+DATABASE_URL=postgresql://chatuser:chatpassword@db:5432/chatarchive
+
+# JWT Configuration
+SECRET_KEY=your-secret-key-change-this-in-production-use-a-strong-random-string
+ALGORITHM=HS256
+ACCESS_TOKEN_EXPIRE_MINUTES=30
+
+# OpenAI Configuration (optional but recommended for AI features)
+OPENAI_API_KEY=your-openai-api-key-here
+
+# Slack Integration (optional)
+SLACK_BOT_TOKEN=xoxb-your-slack-bot-token-here
+SLACK_APP_TOKEN=xapp-your-slack-app-token-here
+
+# Notion Integration (optional)
+NOTION_API_KEY=secret_your-notion-integration-token-here
+NOTION_DATABASE_ID=your-notion-database-id-here

.gitignore

@@ -205,3 +205,16 @@ cython_debug/
 marimo/_static/
 marimo/_lsp/
 __marimo__/
+
+# Node.js
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Build outputs
+dist/
+build/
+
+# Environment files
+.env

ARCHITECTURE.md

@@ -0,0 +1,315 @@
+# Architecture Documentation
+
+## System Architecture
+
+The Chat Archive System follows a modern three-tier architecture:
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                         Frontend                            │
+│  ┌──────────────────────────────────────────────────────┐  │
+│  │  React Application (Vite)                            │  │
+│  │  - Authentication (Login/Register)                   │  │
+│  │  - Message Management                                │  │
+│  │  - Tag Management                                    │  │
+│  │  - Integrations UI                                   │  │
+│  │  - Search & Filtering                                │  │
+│  └──────────────────────────────────────────────────────┘  │
+│                          │ HTTP/REST                        │
+└──────────────────────────┼─────────────────────────────────┘
+                           │
+┌──────────────────────────┼─────────────────────────────────┐
+│                    Backend (FastAPI)                        │
+│  ┌──────────────────────────────────────────────────────┐  │
+│  │  API Layer                                           │  │
+│  │  - Auth Endpoints (JWT)                              │  │
+│  │  - Message CRUD                                      │  │
+│  │  - Tag Management                                    │  │
+│  │  - Slack Integration                                 │  │
+│  │  - Notion Integration                                │  │
+│  └──────────────────────────────────────────────────────┘  │
+│  ┌──────────────────────────────────────────────────────┐  │
+│  │  Service Layer                                       │  │
+│  │  - Authentication Service (JWT, Password hashing)   │  │
+│  │  - AI Service (OpenAI Integration)                  │  │
+│  └──────────────────────────────────────────────────────┘  │
+│  ┌──────────────────────────────────────────────────────┐  │
+│  │  Data Layer (SQLAlchemy ORM)                        │  │
+│  │  - User Model                                        │  │
+│  │  - Message Model                                     │  │
+│  │  - Tag Model                                         │  │
+│  └──────────────────────────────────────────────────────┘  │
+│                          │                                  │
+└──────────────────────────┼─────────────────────────────────┘
+                           │
+┌──────────────────────────┼─────────────────────────────────┐
+│                   Database (PostgreSQL)                     │
+│  ┌──────────────────────────────────────────────────────┐  │
+│  │  Tables:                                             │  │
+│  │  - users                                             │  │
+│  │  - messages                                          │  │
+│  │  - tags                                              │  │
+│  │  - message_tags (association table)                 │  │
+│  └──────────────────────────────────────────────────────┘  │
+└─────────────────────────────────────────────────────────────┘
+
+External Integrations:
+┌─────────────┐    ┌─────────────┐    ┌─────────────┐
+│  OpenAI API │    │  Slack API  │    │ Notion API  │
+│  (GPT-3.5)  │    │  (Import)   │    │  (Sync)     │
+└─────────────┘    └─────────────┘    └─────────────┘
+```
+
+## Component Details
+
+### Frontend (React + Vite)
+
+**Technology Stack:**
+- React 18 for UI components
+- Vite for fast development and building
+- React Router for navigation
+- Axios for HTTP requests
+- CSS3 for styling
+
+**Key Components:**
+- `AuthContext`: Global authentication state management
+- `PrivateRoute`: Protected route wrapper
+- `Navbar`: Navigation component
+- Page components: Messages, Tags, Integrations, Login, Register
+
+**Features:**
+- JWT-based authentication
+- Real-time message management
+- Advanced search and filtering
+- Tag creation and assignment
+- Slack import interface
+- Notion sync interface
+
+### Backend (FastAPI)
+
+**Technology Stack:**
+- FastAPI for API framework
+- SQLAlchemy for ORM
+- Pydantic for data validation
+- JWT for authentication
+- Bcrypt for password hashing
+
+**API Endpoints:**
+
+#### Authentication (`/api/auth`)
+- `POST /register` - User registration
+- `POST /login` - User login (returns JWT)
+- `GET /me` - Get current user info
+
+#### Messages (`/api/messages`)
+- `POST /` - Create message (with auto-categorization)
+- `GET /` - List messages (with pagination)
+- `GET /{id}` - Get single message
+- `PUT /{id}` - Update message
+- `DELETE /{id}` - Delete message
+- `POST /search` - Advanced search
+- `POST /{id}/categorize` - Re-categorize with AI
+
+#### Tags (`/api/tags`)
+- `POST /` - Create tag
+- `GET /` - List all tags
+- `GET /{id}` - Get single tag
+- `DELETE /{id}` - Delete tag
+
+#### Slack Integration (`/api/slack`)
+- `GET /channels` - List Slack channels
+- `POST /import/{channel_id}` - Import messages from channel
+
+#### Notion Integration (`/api/notion`)
+- `POST /sync` - Sync messages to Notion database
+- `GET /database-info` - Get Notion database info
+
+### Database Schema
+
+#### Users Table
+```sql
+CREATE TABLE users (
+    id SERIAL PRIMARY KEY,
+    email VARCHAR UNIQUE NOT NULL,
+    username VARCHAR UNIQUE NOT NULL,
+    hashed_password VARCHAR NOT NULL,
+    is_active BOOLEAN DEFAULT TRUE,
+    is_admin BOOLEAN DEFAULT FALSE,
+    created_at TIMESTAMP DEFAULT NOW()
+);
+```
+
+#### Messages Table
+```sql
+CREATE TABLE messages (
+    id SERIAL PRIMARY KEY,
+    content TEXT NOT NULL,
+    source VARCHAR DEFAULT 'manual',
+    source_id VARCHAR,
+    channel VARCHAR,
+    author VARCHAR NOT NULL,
+    timestamp TIMESTAMP DEFAULT NOW(),
+    category VARCHAR,
+    user_id INTEGER REFERENCES users(id),
+    created_at TIMESTAMP DEFAULT NOW(),
+    updated_at TIMESTAMP DEFAULT NOW()
+);
+```
+
+#### Tags Table
+```sql
+CREATE TABLE tags (
+    id SERIAL PRIMARY KEY,
+    name VARCHAR UNIQUE NOT NULL,
+    color VARCHAR DEFAULT '#3b82f6',
+    created_at TIMESTAMP DEFAULT NOW()
+);
+```
+
+#### Message Tags Association Table
+```sql
+CREATE TABLE message_tags (
+    message_id INTEGER REFERENCES messages(id) ON DELETE CASCADE,
+    tag_id INTEGER REFERENCES tags(id) ON DELETE CASCADE,
+    PRIMARY KEY (message_id, tag_id)
+);
+```
+
+## Data Flow
+
+### Message Creation with AI Categorization
+
+1. User submits message through frontend
+2. Frontend sends POST request to `/api/messages/`
+3. Backend validates request with Pydantic schema
+4. Backend calls OpenAI API to categorize message
+5. Backend creates message in database with category
+6. Backend returns created message to frontend
+7. Frontend updates UI with new message
+
+### Slack Import Flow
+
+1. User selects Slack channel in UI
+2. Frontend requests `/api/slack/import/{channel_id}`
+3. Backend authenticates with Slack API
+4. Backend fetches messages from Slack channel
+5. For each message:
+   - Check if already imported (using source_id)
+   - Call OpenAI to categorize
+   - Create in database
+6. Backend returns imported messages count
+7. Frontend displays success message
+
+### Notion Sync Flow
+
+1. User clicks "Sync to Notion" button
+2. Frontend sends POST to `/api/notion/sync`
+3. Backend authenticates with Notion API
+4. Backend fetches all user messages
+5. For each message:
+   - Create page in Notion database
+   - Include all metadata (category, tags, etc.)
+6. Backend returns sync statistics
+7. Frontend displays results
+
+## Security
+
+### Authentication
+- JWT tokens with expiration
+- Bcrypt password hashing
+- Token stored in localStorage
+- Protected routes in frontend
+- Dependency injection for auth in backend
+
+### API Security
+- CORS configured for specific origins
+- Input validation with Pydantic
+- SQL injection prevention via ORM
+- Rate limiting (can be added)
+
+### Data Security
+- Environment variables for secrets
+- No API keys in code
+- Database passwords not exposed
+- HTTPS recommended for production
+
+## Scalability Considerations
+
+### Current Architecture
+- Suitable for small to medium deployments
+- Single database instance
+- Stateless backend (horizontal scaling possible)
+
+### Future Improvements
+1. **Caching**: Redis for session management and caching
+2. **Message Queue**: Celery for async tasks (AI categorization, imports)
+3. **Load Balancing**: Nginx for multiple backend instances
+4. **Database Scaling**: Read replicas, connection pooling
+5. **CDN**: For static frontend assets
+6. **Monitoring**: Prometheus + Grafana
+7. **Logging**: ELK stack or similar
+
+## Deployment
+
+### Docker Deployment
+All services containerized:
+- Frontend: Nginx serving React build
+- Backend: uvicorn ASGI server
+- Database: PostgreSQL 15
+
+### Production Checklist
+- [ ] Change SECRET_KEY
+- [ ] Use strong database password
+- [ ] Configure HTTPS
+- [ ] Set up backups
+- [ ] Configure monitoring
+- [ ] Set up logging
+- [ ] Review CORS settings
+- [ ] Rate limiting
+- [ ] Database connection pooling
+
+## Performance
+
+### Backend
+- FastAPI is async-capable
+- SQLAlchemy lazy loading
+- Pagination for list endpoints
+- Index on frequently queried fields
+
+### Frontend
+- Code splitting with Vite
+- Lazy loading of routes
+- Minimal re-renders with React hooks
+- Caching of API responses (can be added)
+
+### Database
+- Indexes on foreign keys
+- Indexes on search fields (content, author)
+- Connection pooling
+- Query optimization
+
+## Monitoring & Observability
+
+### Recommended Additions
+1. **Health Checks**: Already implemented at `/health`
+2. **Metrics**: Add endpoint for Prometheus
+3. **Logging**: Structured logging with correlation IDs
+4. **Tracing**: OpenTelemetry for distributed tracing
+5. **Alerts**: Set up alerts for errors and performance
+
+## Testing Strategy
+
+### Backend Tests
+- Unit tests for services
+- Integration tests for API endpoints
+- Test database with SQLite
+
+### Frontend Tests (To be added)
+- Component tests with React Testing Library
+- E2E tests with Playwright
+- Integration tests for API calls
+
+### Manual Testing
+- Use Swagger UI at `/docs`
+- Test all user flows
+- Test integrations with real APIs