collabrix/README.md

# Team Chat - Internal Chat Application with Code Snippet Library

Eine vollständige interne Chat-Anwendung ähnlich Microsoft Teams mit integrierter Code-Snippet-Bibliothek.

## Features

### Chat-Funktionen
- ✅ Benutzerregistrierung und JWT-Authentifizierung
- ✅ Abteilungs- und Kanal-Management
- ✅ Echtzeit-Chat über WebSockets
- ✅ Datei-Uploads (bis 20 MB)
- ✅ Zugriffskontrolle basierend auf Abteilungszugehörigkeit

### Code-Snippet-Bibliothek
- ✅ CRUD-Operationen für Code-Snippets
- ✅ Sichtbarkeit: Private, Abteilung, Organisation
- ✅ Filter nach Sprache, Tags, Volltext-Suche
- ✅ Integration in Chat-Nachrichten
- ✅ Syntax-Highlighting für Code-Blöcke

### UI/UX
- ✅ Light/Dark-Theme mit Toggle
- ✅ Responsive Design mit Tailwind CSS
- ✅ Microsoft Teams-ähnliches Layout
- ✅ React + TypeScript Frontend

## Tech Stack

**Backend:**
- Python 3.11
- FastAPI
- PostgreSQL 17
- SQLModel (ORM)
- JWT Authentication
- WebSockets
- pytest

**Frontend:**
- React 18
- TypeScript
- Vite
- Tailwind CSS
- Axios

## Projektstruktur

```
.
├── backend/
│   ├── app/
│   │   ├── main.py              # FastAPI App
│   │   ├── config.py            # Konfiguration
│   │   ├── database.py          # DB Setup
│   │   ├── models.py            # SQLModel Modelle
│   │   ├── schemas.py           # Pydantic Schemas
│   │   ├── auth.py              # JWT Auth
│   │   ├── websocket.py         # WebSocket Manager
│   │   └── routers/
│   │       ├── auth.py          # Auth Endpoints
│   │       ├── departments.py   # Abteilungen
│   │       ├── channels.py      # Kanäle
│   │       ├── messages.py      # Nachrichten
│   │       ├── files.py         # Datei-Uploads
│   │       ├── snippets.py      # Code-Snippets
│   │       └── websocket.py     # WebSocket Endpoint
│   ├── tests/                   # pytest Tests
│   ├── requirements.txt
│   ├── .env.example
│   └── Dockerfile
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   │   ├── Auth/            # Login/Register
│   │   │   ├── Chat/            # Chat-Komponenten
│   │   │   ├── Snippets/        # Snippet-Bibliothek
│   │   │   └── Layout/          # Layout & Navigation
│   │   ├── contexts/            # React Contexts (Auth, Theme)
│   │   ├── services/            # API Services
│   │   ├── types/               # TypeScript Types
│   │   ├── App.tsx
│   │   └── main.tsx
│   ├── package.json
│   └── Dockerfile
└── docker-compose.yml
```

## Installation & Start

### Voraussetzungen
- Docker & Docker Compose **ODER**
- Python 3.11, Node.js 18, PostgreSQL 17

### Option 1: Mit Docker (empfohlen)

```bash
# Projekt klonen
cd /home/OfficeDesk

# Starten
docker-compose up -d

# Backend läuft auf: http://localhost:8000
# Frontend läuft auf: http://localhost:5173
# API Docs: http://localhost:8000/docs
```

### Option 2: Manuell

**Backend:**

```bash
cd backend

# Virtuelle Umgebung erstellen
python -m venv venv
source venv/bin/activate  # Linux/Mac
# oder: venv\Scripts\activate  # Windows

# Dependencies installieren
pip install -r requirements.txt

# .env Datei erstellen
cp .env.example .env
# Anpassen: DATABASE_URL mit deiner PostgreSQL-Connection

# Datenbank erstellen (PostgreSQL 17)
createdb teamchat
createdb teamchat_test

# Server starten
uvicorn app.main:app --reload

# Server läuft auf: http://localhost:8000
```

**Frontend:**

```bash
cd frontend

# Dependencies installieren
npm install

# Dev-Server starten
npm run dev

# Frontend läuft auf: http://localhost:5173
```

## Verwendung

### 1. Ersten Benutzer registrieren

```bash
# Via UI: http://localhost:5173/register
# Oder via API:
curl -X POST http://localhost:8000/auth/register \
  -H "Content-Type: application/json" \
  -d '{
    "username": "admin",
    "email": "admin@example.com",
    "password": "secure_password",
    "full_name": "Admin User"
  }'
```

### 2. Login

```bash
curl -X POST http://localhost:8000/auth/login \
  -H "Content-Type: application/json" \
  -d '{
    "username": "admin",
    "password": "secure_password"
  }'

# Response: {"access_token": "...", "token_type": "bearer"}
```

### 3. Abteilung erstellen

```bash
curl -X POST http://localhost:8000/departments/ \
  -H "Authorization: Bearer YOUR_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "name": "IT",
    "description": "IT Department"
  }'
```

### 4. Benutzer zu Abteilung hinzufügen

```bash
curl -X POST http://localhost:8000/departments/1/users/1 \
  -H "Authorization: Bearer YOUR_TOKEN"
```

### 5. Kanal erstellen

```bash
curl -X POST http://localhost:8000/channels/ \
  -H "Authorization: Bearer YOUR_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "name": "general",
    "description": "General discussion",
    "department_id": 1
  }'
```

### 6. Code-Snippet erstellen

```bash
curl -X POST http://localhost:8000/snippets/ \
  -H "Authorization: Bearer YOUR_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "title": "PostgreSQL Connection",
    "language": "python",
    "content": "import psycopg2\n\nconn = psycopg2.connect(...)",
    "tags": "python, postgresql, database",
    "visibility": "organization"
  }'
```

## Tests ausführen

```bash
cd backend

# Alle Tests
pytest

# Mit Coverage
pytest --cov=app

# Spezifische Tests
pytest tests/test_auth.py
pytest tests/test_snippets.py -v
```

## API Dokumentation

Interaktive API-Dokumentation:
- **Swagger UI:** http://localhost:8000/docs
- **ReDoc:** http://localhost:8000/redoc

## Konfiguration

### Backend (.env)

```bash
# Datenbank
DATABASE_URL=postgresql://user:password@localhost:5432/teamchat
TEST_DATABASE_URL=postgresql://user:password@localhost:5432/teamchat_test

# JWT
SECRET_KEY=your-secret-key-min-32-characters-long
ALGORITHM=HS256
ACCESS_TOKEN_EXPIRE_MINUTES=30

# File Upload
UPLOAD_DIR=./uploads
MAX_UPLOAD_SIZE=20971520  # 20 MB

# CORS
FRONTEND_URL=http://localhost:5173
```

### Sicherheit

⚠️ **Wichtig für Production:**
- `SECRET_KEY` mit sicherem, zufälligem Wert ersetzen
- PostgreSQL-Passwort ändern
- HTTPS verwenden
- CORS-Origins einschränken
- Rate-Limiting implementieren

## Features & Workflows

### Snippet-Workflow

1. **Snippet erstellen:** Navigiere zu "Snippets" → "+ New"
2. **Code eingeben:** Title, Sprache, Code, Tags
3. **Sichtbarkeit wählen:** Private / Department / Organization
4. **Snippet im Chat verwenden:** Chat-Eingabe → 📋 Button → Snippet auswählen
5. **Snippet-Nachricht senden:** Snippet wird mit Code-Block angezeigt

### Chat-Workflow

1. **Abteilung beitreten:** Admin fügt User zu Department hinzu
2. **Kanäle sehen:** Sidebar zeigt Kanäle der eigenen Abteilungen
3. **Nachrichten senden:** Text eingeben, optional Snippet oder Datei anhängen
4. **Echtzeit-Updates:** Neue Nachrichten erscheinen sofort via WebSocket

## Annahmen & Design-Entscheidungen

1. **Authentifizierung:** JWT Bearer Tokens, 30 Min. Gültigkeit
2. **Zugriffskontrolle:** 
   - Channel-Zugriff nur für Department-Mitglieder
   - Snippet-Sichtbarkeit: private < department < organization
3. **Datei-Speicherung:** Lokal im Filesystem (Upload-Dir konfigurierbar)
4. **Tags:** Einfache kommagetrennte Liste (keine separate Tabelle)
5. **WebSocket:** Ein Socket pro Channel, Token-Auth via Query-Parameter
6. **Theme:** Persistenz im LocalStorage, Client-seitig
7. **Pagination:** Messages mit limit/offset (Default: 50)
8. **Tests:** SQLite In-Memory-DB für Unit-Tests (schneller als PostgreSQL)

## Troubleshooting

**Problem:** Backend startet nicht
```bash
# Prüfe PostgreSQL
pg_isready -h localhost -p 5432

# Prüfe Logs
docker-compose logs backend
```

**Problem:** Frontend verbindet nicht zum Backend
```bash
# Prüfe CORS-Einstellungen in backend/.env
# Prüfe Proxy in frontend/vite.config.ts
```

**Problem:** WebSocket-Verbindung schlägt fehl
```bash
# Prüfe Token im LocalStorage
# Prüfe Browser-Console auf Fehler
# WebSocket-URL: ws://localhost:8000/ws/{channel_id}?token={jwt_token}
```

## Lizenz

Internes Projekt für [Firmenname]

## Support

Bei Fragen: [Deine E-Mail oder Slack-Channel]