Skip to content

README_Frontend.md

Latest commit

 

History

History
214 lines (155 loc) · 5.38 KB

README_Frontend.md

File metadata and controls

214 lines (155 loc) · 5.38 KB
Raw

Frontend – Graphenbasierte Systeme

Das Frontend ist eine moderne Next.js 15 App mit einem Chat-Interface für die Interaktion mit dem KI-Assistenten.

Funktionen

  • 💬 Chat-Interface: Moderne Konversations-UI
  • 🔐 Authentifizierung: Login/Register mit JWT
  • 📊 User-Profil: Statistiken & Einstellungen
  • 🔄 Session-Management: Mehrere Chat-Sessions parallel
  • 🤖 Model-Selection: Wahl zwischen lokalem und Online-Modell
  • 📎 Source-Anzeige: Verlinkte Quellen aus Neo4j
  • 🎨 Markdown-Support: Formatierte Antworten mit Code-Highlighting

Technologie-Stack

  • Framework: Next.js 15 (App Router)
  • UI: React 19, TailwindCSS
  • State Management: React Hooks, LocalStorage
  • Markdown: react-markdown, remark-gfm, rehype-prism
  • HTTP: Native fetch API

Start mit Docker (Empfohlen)

# Komplettes System starten (inkl. Frontend)
docker-compose up

# Nur Frontend neu starten
docker-compose restart frontend

# Frontend Logs anzeigen
docker-compose logs -f frontend

Das Frontend läuft dann auf http://localhost:3000.

Konfiguration

Die Konfiguration erfolgt über Umgebungsvariablen in docker-compose.yml:

environment:
  NEXT_PUBLIC_API_BASE_URL: http://localhost:8083
  NODE_ENV: production

Lokale .env (Optional)

Erstelle .env.local im Frontend-Ordner:

# Frontend/.env.local

# Backend API URL (überschreibt docker-compose)
NEXT_PUBLIC_API_BASE_URL=http://localhost:8083

Projektstruktur

Frontend/
├── app/                    # Next.js App Router
│   ├── page.tsx           # Home/Chat Page
│   ├── auth/              # Login/Register
│   │   └── page.tsx
│   ├── layout.tsx         # Root Layout
│   └── globals.css        # Global Styles
├── components/            # React Components
│   ├── chat/              # Chat UI Components
│   │   ├── ChatComposer.tsx
│   │   ├── ChatHeader.tsx
│   │   ├── ChatMessage.tsx
│   │   ├── ChatMessageList.tsx
│   │   └── ChatSidebar.tsx
│   ├── ui/                # UI Components
│   │   ├── GeminiApiKeyModal.tsx
│   │   ├── Tooltip.tsx
│   │   └── UserProfileModal.tsx
│   └── ErrorBoundary.tsx  # Error Handler
├── hooks/                 # Custom React Hooks
│   └── useChatSession.ts  # Chat State Management
├── lib/                   # Utilities
│   └── services/          # API Services
│       ├── assistant.ts   # LLM API
│       ├── auth.ts        # Auth API
│       ├── chat.ts        # Chat API
│       └── user.ts        # User API
└── types/                 # TypeScript Types
    └── chat.ts

Development

Production Mode (Standard)

docker-compose up
  • Optimierter Build
  • Beste Performance
  • Code-Änderungen erfordern Rebuild

Development Mode (Hot Reload)

docker-compose -f docker-compose.dev.yml up
  • Automatisches Neuladen
  • Schnellere Iteration
  • Live-Editing

In Container einsteigen

docker exec -it graph_frontend sh

# Im Container:
cd /app
ls -la

Logs anschauen

# Live logs
docker-compose logs -f frontend

# Letzte 100 Zeilen
docker-compose logs --tail=100 frontend

Features im Detail

Chat Session Management

  • Automatisches Speichern der Chat-Historie
  • Mehrere Sessions parallel
  • Session-Titel aus erster Nachricht
  • Löschen von Sessions
  • Automatisches Laden beim Start

Model Selection

  • Local: THM KI-Box (120b) - Lokales LLM
  • Online: Gemini Pro (Google) - Benötigt API Key

Modell-Wechsel ist jederzeit während eines Chats möglich.

User Profile

  • Statistiken: Nachrichten, Wörter, Tokens, Chats
  • Profilbearbeitung: Name, E-Mail
  • Gemini API Key Verwaltung
  • Logout-Funktion

Source Links

Wenn die KI Datenbank-Queries ausführt, werden relevante Neo4j-Entitäten als klickbare Links angezeigt.

Troubleshooting

Frontend lädt nicht

# Container neu starten
docker-compose restart frontend

# Logs prüfen
docker-compose logs frontend

# Cache löschen
docker-compose down
docker volume rm graphenbasierte-systeme_frontend_next
docker-compose up --build frontend

"Cannot connect to backend"

  1. Prüfe ob Backend läuft: docker-compose ps
  2. Teste Backend: curl http://localhost:8083/api/docs
  3. Prüfe NEXT_PUBLIC_API_BASE_URL in docker-compose.yml

Browser-Extensions interferieren

Siehe Hauptdokumentation (Troubleshooting-Sektion) für Lösungen zu Browser-Extension-Konflikten.

API Integration

Das Frontend kommuniziert mit folgenden Backend-Endpunkten:

  • POST /auth/login - Login
  • POST /auth/register - Registrierung
  • GET /users/profile - User-Profil
  • GET /users/chats - Chat-Sessions
  • GET /users/chats/:id - Nachrichten einer Session
  • POST /users/messages - Neue Nachricht speichern
  • POST /assistant/request - KI-Anfrage
  • GET /assistant/models - Verfügbare Modelle

Siehe lib/services/ für API-Service-Implementierungen.

Weitere Ressourcen

Credits: Für das Frontend-Design und Verbindung zum Backend habe ich GitHub Copilot genutzt. - Khaled Abuhaltam