# Architektur Diagramme - Frontend Nyla

Diese Datei enthält visuelle Diagramme der Frontend-Architektur im Mermaid-Format.

## 1. High-Level Architektur

```mermaid
graph TB
    subgraph "Entry Point"
        A[main.tsx] --> B[App.tsx]
    end
    
    subgraph "Infrastructure Layer"
        B --> C[LanguageProvider]
        B --> D[AuthProvider]
        B --> E[Router]
    end
    
    subgraph "Routing Layer"
        E --> F[Login]
        E --> G[Register]
        E --> H[ProtectedRoute]
    end
    
    subgraph "Application Layer"
        H --> I[Home]
        I --> J[Sidebar]
        I --> K[PageManager]
    end
    
    subgraph "Pages"
        K --> L[Dashboard]
        K --> M[Dateien]
        K --> N[Connections]
        K --> O[Workflows]
        K --> P[Prompts]
        K --> Q[TeamBereich]
        K --> R[Einstellungen]
    end
    
    style A fill:#e1f5ff
    style B fill:#e1f5ff
    style C fill:#fff4e1
    style D fill:#fff4e1
    style E fill:#fff4e1
    style I fill:#e8f5e9
    style K fill:#e8f5e9
```

## 2. Component Hierarchy

```mermaid
graph TD
    A[App.tsx] --> B[Router]
    B --> C[Home]
    C --> D[Sidebar]
    C --> E[PageManager]
    
    E --> F[Dashboard]
    E --> G[Dateien]
    E --> H[Connections]
    E --> I[Workflows]
    
    F --> J[DashboardChat]
    J --> K[DashboardChatArea]
    K --> L[DashboardChatAreaMessageList]
    K --> M[DashboardChatAreaInput]
    K --> N[DashboardChatAreaConnectedFiles]
    
    G --> O[DateienTable]
    O --> P[FilePreview]
    P --> Q[FileRenderers]
    
    H --> R[ConnectionsTable]
    R --> S[ConnectionEditModal]
    
    style A fill:#ffebee
    style C fill:#e3f2fd
    style E fill:#e8f5e9
    style F fill:#fff3e0
    style G fill:#fff3e0
    style H fill:#fff3e0
```

## 3. Data Flow Architecture

```mermaid
graph LR
    subgraph "UI Layer"
        A[Page Component] --> B[Feature Component]
    end
    
    subgraph "Business Logic Layer"
        B --> C[Custom Hook]
        C --> D[useApiRequest]
    end
    
    subgraph "API Layer"
        D --> E[api.ts]
        E --> F[Axios Instance]
        F --> G[Backend API]
    end
    
    subgraph "State Management"
        C --> H[React State]
        H --> I[Context API]
    end
    
    G -.Response.-> F
    F -.Data.-> D
    D -.State Update.-> C
    C -.Re-render.-> B
    
    style A fill:#e1f5ff
    style C fill:#fff4e1
    style E fill:#e8f5e9
    style G fill:#fce4ec
```

## 4. Authentication Flow

```mermaid
sequenceDiagram
    participant User
    participant App
    participant AuthProvider
    participant MSAL
    participant ProtectedRoute
    participant Backend
    
    User->>App: Access Protected Route
    App->>AuthProvider: Check Auth Status
    AuthProvider->>MSAL: Get Account
    MSAL-->>AuthProvider: Account Status
    
    alt Not Authenticated
        AuthProvider-->>App: No Account
        App->>ProtectedRoute: Redirect to Login
        ProtectedRoute->>User: Show Login Page
        User->>MSAL: Login Request
        MSAL->>Backend: OAuth Flow
        Backend-->>MSAL: Token
        MSAL-->>AuthProvider: Account + Token
        AuthProvider->>App: Authenticated
    end
    
    AuthProvider->>ProtectedRoute: Allow Access
    ProtectedRoute->>App: Render Protected Content
```

## 5. Page Management Flow

```mermaid
stateDiagram-v2
    [*] --> PageManager: Route Change
    
    PageManager --> CheckConfig: Get Page Config
    CheckConfig --> LoadPage: Config Found & Enabled
    CheckConfig --> ErrorPage: Config Not Found
    
    LoadPage --> CheckInstance: Page Instance Exists?
    
    CheckInstance --> ReuseInstance: Yes (Preserved)
    CheckInstance --> CreateInstance: No
    
    ReuseInstance --> ShowPage: Activate Instance
    CreateInstance --> LazyLoad: Load Component
    LazyLoad --> ShowPage: Component Loaded
    
    ShowPage --> AnimateIn: Framer Motion
    AnimateIn --> Active: Page Active
    
    Active --> AnimateOut: Navigate Away
    AnimateOut --> Cleanup: Non-Preserved
    AnimateOut --> Hide: Preserved
    
    Cleanup --> [*]
    Hide --> [*]
    ErrorPage --> [*]
```

## 6. Workflow Management Flow

```mermaid
graph TB
    subgraph "Dashboard Page"
        A[Dashboard.tsx] --> B[useWorkflowManager]
    end
    
    subgraph "Workflow Manager Hook"
        B --> C[useWorkflow]
        B --> D[useWorkflowStatus]
        B --> E[useWorkflowMessages]
        B --> F[useWorkflowLogs]
        B --> G[useWorkflowOperations]
    end
    
    subgraph "Workflows Hook"
        C --> H[useApiRequest]
        D --> H
        E --> H
        F --> H
        G --> H
    end
    
    subgraph "API Layer"
        H --> I[api.ts]
        I --> J[Backend API]
    end
    
    subgraph "Polling Logic"
        B --> K{Polling Active?}
        K -->|Yes| L[Poll Every 2s]
        L --> D
        L --> E
        L --> F
        K -->|No| M[Stop Polling]
    end
    
    style A fill:#e1f5ff
    style B fill:#fff4e1
    style H fill:#e8f5e9
    style I fill:#fce4ec
```

## 7. File Upload & Preview Flow

```mermaid
sequenceDiagram
    participant User
    participant DateienPage
    participant DateienTable
    participant useFileOperations
    participant api.ts
    participant Backend
    participant FilePreview
    
    User->>DateienPage: Upload File
    DateienPage->>DateienTable: File Selected
    DateienTable->>useFileOperations: uploadFile(file)
    useFileOperations->>api.ts: POST /api/files/
    api.ts->>Backend: Upload Request
    Backend-->>api.ts: File Metadata
    api.ts-->>useFileOperations: Response
    useFileOperations-->>DateienTable: Success
    
    User->>DateienTable: Click File
    DateienTable->>FilePreview: Show Preview
    FilePreview->>FilePreview: Detect File Type
    FilePreview->>FilePreview: Select Renderer
    FilePreview->>api.ts: GET /api/files/{id}/content
    api.ts->>Backend: File Content Request
    Backend-->>api.ts: File Content
    api.ts-->>FilePreview: Content Data
    FilePreview-->>User: Render Preview
```

## 8. Internationalization Flow

```mermaid
graph TB
    subgraph "Initialization"
        A[App.tsx] --> B[LanguageProvider]
        B --> C{Check localStorage}
        C -->|Found| D[Load Saved Language]
        C -->|Not Found| E[Detect Browser Language]
        D --> F[loadLanguage]
        E --> F
    end
    
    subgraph "Language Loading"
        F --> G{Language Code}
        G -->|de| H[locales/de.ts]
        G -->|en| I[locales/en.ts]
        G -->|fr| J[locales/fr.ts]
        H --> K[Translation Object]
        I --> K
        J --> K
    end
    
    subgraph "Usage"
        K --> L[LanguageContext State]
        L --> M[useLanguage Hook]
        M --> N[Component]
        N --> O[t function]
        O --> P[Translation Key]
        P --> K
    end
    
    style A fill:#e1f5ff
    style B fill:#fff4e1
    style K fill:#e8f5e9
    style N fill:#fce4ec
```

## 9. Component Dependency Graph

```mermaid
graph TD
    subgraph "Core Components"
        A[PageManager] --> B[pageConfigs]
        B --> C[Lazy Pages]
    end
    
    subgraph "Feature Components"
        D[DashboardChat] --> E[DashboardChatArea]
        E --> F[DashboardChatAreaMessageList]
        E --> G[DashboardChatAreaInput]
        E --> H[DashboardChatAreaConnectedFiles]
        
        I[DateienTable] --> J[FilePreview]
        J --> K[FileRenderers]
        
        L[ConnectionsTable] --> M[ConnectionEditModal]
        
        N[PromptsTable] --> O[Popup]
        O --> P[EditForm]
    end
    
    subgraph "Hooks Layer"
        Q[useWorkflowManager] --> R[useWorkflows]
        R --> S[useApiRequest]
        
        T[useConnections] --> S
        U[useFiles] --> S
        V[usePrompts] --> S
    end
    
    subgraph "API Layer"
        S --> W[api.ts]
        W --> X[Backend]
    end
    
    C --> D
    C --> I
    C --> L
    C --> N
    
    D --> Q
    I --> U
    L --> T
    N --> V
    
    style A fill:#e1f5ff
    style S fill:#fff4e1
    style W fill:#e8f5e9
    style X fill:#fce4ec
```

## 10. State Management Architecture

```mermaid
graph TB
    subgraph "Global State"
        A[LanguageContext] --> B[Current Language]
        A --> C[Translations]
        
        D[AuthProvider] --> E[MSAL Instance]
        D --> F[Account State]
    end
    
    subgraph "Component State"
        G[useState] --> H[Local Component State]
        I[useReducer] --> J[Complex State Logic]
    end
    
    subgraph "Derived State"
        K[useMemo] --> L[Computed Values]
        M[useCallback] --> N[Memoized Functions]
    end
    
    subgraph "Server State"
        O[useApiRequest] --> P[Loading State]
        O --> Q[Error State]
        O --> R[Data State]
    end
    
    B --> G
    C --> G
    E --> D
    F --> D
    
    H --> K
    J --> K
    
    P --> G
    Q --> G
    R --> G
    
    style A fill:#e1f5ff
    style D fill:#e1f5ff
    style O fill:#fff4e1
    style G fill:#e8f5e9
```

## 11. Build & Deployment Flow

```mermaid
graph LR
    subgraph "Development"
        A[Source Code] --> B[Vite Dev Server]
        B --> C[Hot Module Replacement]
        C --> D[Browser]
    end
    
    subgraph "Build Process"
        E[Source Code] --> F[TypeScript Compiler]
        F --> G[Vite Build]
        G --> H[Bundle Optimization]
        H --> I[Static Assets]
    end
    
    subgraph "Environment"
        J[.env.dev] --> B
        K[.env.int] --> G
        L[.env.prod] --> G
    end
    
    subgraph "Deployment"
        I --> M[Static Web App]
        M --> N[Azure Static Web Apps]
    end
    
    style A fill:#e1f5ff
    style B fill:#fff4e1
    style G fill:#e8f5e9
    style N fill:#fce4ec
```

## 12. Error Handling Flow

```mermaid
graph TD
    A[API Request] --> B{Request Success?}
    
    B -->|Yes| C[Return Data]
    B -->|No| D[Error Handler]
    
    D --> E{Error Type?}
    
    E -->|401 Unauthorized| F[Clear Token]
    F --> G[Redirect to Login]
    
    E -->|Validation Error| H[Format Validation Errors]
    H --> I[Display User-Friendly Message]
    
    E -->|Network Error| J[Display Network Error]
    
    E -->|Server Error| K[Format Server Error]
    K --> I
    
    E -->|Unknown Error| L[Display Generic Error]
    
    I --> M[Update UI State]
    J --> M
    L --> M
    
    style A fill:#e1f5ff
    style D fill:#ffebee
    style M fill:#e8f5e9
```

---

## Diagramm-Erklärungen

### Farbcodierung
- **Blau (#e1f5ff)**: Entry Points & Core Components
- **Orange (#fff4e1)**: Business Logic & Hooks
- **Grün (#e8f5e9)**: API Layer & Data
- **Rosa (#fce4ec)**: External Services & Backend

### Diagramm-Typen
1. **High-Level Architektur**: Gesamtübersicht der Anwendung
2. **Component Hierarchy**: Komponenten-Struktur und Verschachtelung
3. **Data Flow**: Datenfluss durch die Anwendung
4. **Sequence Diagrams**: Zeitliche Abläufe von Prozessen
5. **State Diagrams**: Zustandsübergänge
6. **Dependency Graphs**: Abhängigkeiten zwischen Modulen

---

*Zuletzt aktualisiert: 2025-01-15*