init ChatGPTFirewall

.env.local.example

@@ -0,0 +1,4 @@
+VITE_AUTH0_DOMAIN=
+VITE_AUTH0_CLIENT_ID=
+VITE_JWT_AUDIENCE=
+VITE_JWT_ISSUER=

.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended'
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true }
+    ]
+  }
+};

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "trailingComma": "none",
+  "bracketSpacing": true
+}

Dockerfile

@@ -0,0 +1,62 @@
+FROM node:current-bullseye-slim as dev
+
+WORKDIR /app
+
+COPY ./package.json .
+COPY ./package-lock.json .
+
+RUN npm install
+
+RUN echo "VITE_AUTH0_DOMAIN=$VITE_AUTH0_DOMAIN" > .env.local && \
+    echo "VITE_AUTH0_CLIENT_ID=$VITE_AUTH0_CLIENT_ID" >> .env.local && \
+    echo "VITE_JWT_AUDIENCE=$VITE_JWT_AUDIENCE" >> .env.local && \
+    echo "VITE_JWT_ISSUER=$VITE_JWT_ISSUER" >> .env.local
+
+COPY entrypoint.sh ./entrypoint.sh
+
+RUN ["chmod", "+x", "entrypoint.sh"]
+ENTRYPOINT ["/app/entrypoint.sh"]
+
+FROM node:current-bullseye-slim as prod
+
+ARG VITE_AUTH0_DOMAIN
+ARG VITE_AUTH0_CLIENT_ID
+ARG VITE_JWT_AUDIENCE
+ARG VITE_JWT_ISSUER
+
+ENV VITE_AUTH0_DOMAIN=$VITE_AUTH0_DOMAIN \
+    VITE_AUTH0_CLIENT_ID=$VITE_AUTH0_CLIENT_ID \
+    VITE_JWT_AUDIENCE=$VITE_JWT_AUDIENCE \
+    VITE_JWT_ISSUER=$VITE_JWT_ISSUER
+
+WORKDIR /app
+
+COPY package.json package-lock.json ./
+
+RUN npm install
+
+RUN echo "VITE_AUTH0_DOMAIN=$VITE_AUTH0_DOMAIN" > .env.production.local && \
+    echo "VITE_AUTH0_CLIENT_ID=$VITE_AUTH0_CLIENT_ID" >> .env.production.local && \
+    echo "VITE_JWT_AUDIENCE=$VITE_JWT_AUDIENCE" >> .env.production.local && \
+    echo "VITE_JWT_ISSUER=$VITE_JWT_ISSUER" >> .env.production.local
+
+COPY . .
+
+RUN npm run build
+
+# Prod Stage
+FROM nginx:stable-alpine
+
+WORKDIR /usr/share/nginx/html
+
+RUN rm -rf ./*
+
+RUN mkdir -p /etc/nginx/ssl
+
+COPY --from=prod /app/dist .
+
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

README copy.md

@@ -0,0 +1,30 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default {
+  // other rules...
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname
+  }
+};
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

entrypoint.sh

@@ -0,0 +1,5 @@
+#!/bin/sh
+
+cd /app
+npm install
+npm run dev

fly.toml

@@ -0,0 +1,17 @@
+# fly.toml app configuration file generated for ccc-frontend on 2023-08-21T15:35:09+02:00
+#
+# See https://fly.io/docs/reference/configuration/ for information about how to use this file.
+#
+
+app = "ccc-frontend"
+primary_region = "ams"
+
+[build]
+
+[http_service]
+  internal_port = 443
+  force_https = true
+  auto_stop_machines = false
+  auto_start_machines = true
+  min_machines_running = 0
+  processes = ["app"]

i18next-parser.config.js

@@ -0,0 +1,5 @@
+export default {
+  locales: ['en', 'de'],
+  output: 'public/locales/$LOCALE/translation.json',
+  input: 'src/**/*.{js,jsx,ts,tsx}'
+};

index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ChatGPTfirewall</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+    <script>
+      const global = globalThis;
+    </script>
+  </body>
+</html>

nginx.conf

@@ -0,0 +1,17 @@
+server {
+    listen 7860
+    server_name _
+
+    location / {
+        root /usr/share/nginx/html
+        try_files $uri $uri/ /index.html
+    }
+
+    location /api {
+        proxy_pass http://185.112.181.192:8000/api;
+        proxy_set_header X-Forwarded-Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header Host $host;
+        proxy_read_timeout 3600;
+    }
+}

package.json

@@ -0,0 +1,49 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build --mode production",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "i18n:extract": "npx i18next-parser",
+    "format": "prettier --write .",
+    "format:check": "prettier --check ."
+  },
+  "dependencies": {
+    "@auth0/auth0-react": "^2.2.4",
+    "@fluentui/react": "^8.115.5",
+    "@fluentui/react-components": "^9.46.3",
+    "@fluentui/react-icons": "^2.0.226",
+    "axios": "^1.6.7",
+    "date-fns": "^3.3.1",
+    "draft-js": "^0.11.7",
+    "i18next": "^23.8.2",
+    "i18next-browser-languagedetector": "^7.2.0",
+    "i18next-http-backend": "^2.4.3",
+    "prettier": "^3.2.4",
+    "react": "^18.2.0",
+    "react-country-flag": "^3.1.0",
+    "react-dom": "^18.2.0",
+    "react-highlight-within-textarea": "^3.2.1",
+    "react-i18next": "^14.0.1",
+    "react-router-dom": "^6.21.3"
+  },
+  "devDependencies": {
+    "@flydotio/dockerfile": "^0.5.2",
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.20.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.55.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "i18next-parser": "^8.12.0",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.8",
+    "vite-plugin-svgr": "^4.2.0"
+  }
+}

public/locales/de/translation.json

@@ -0,0 +1,86 @@
+{
+  "guideCardStep1Title": "Daten hochladen",
+  "guideCardStep1Content": "Wähle Dateien aus oder lade sie hoch.",
+  "guideCardStep2Title": "Raum erstellen",
+  "guideCardStep2Content": "Richte einen Raum für deine Dateien ein.",
+  "guideCardStep3Title": "Fragen stellen",
+  "guideCardStep3Content": "Erhalte Antworten zu deinen Dokumenten.",
+  "guideCardDemoLinkText": "... oder probiere die Demo aus!",
+  "unexpectedErrorOccurred": "Ein unerwarteter Fehler ist aufgetreten",
+  "errorfetchingFiles": "Fehler beim Abrufen der Dateien",
+  "fileUploadSuccess": "Dateien erfolgreich hochgeladen",
+  "errorUploadingFiles": "Fehler beim hochladen der Dateien",
+  "filesDeletedSuccess": "Dateien erfolgreich entfernt",
+  "errorDeletingFiles": "Fehler beim Entfernen der Dateien",
+  "fileExplorerDialogButton": "Dateien",
+  "fileExplorerTitle": "Deine Dateien",
+  "nextCloudButtonSub": "Verbinden mit Nextcloud",
+  "nextCloudButton": "Nextcloud",
+  "loading": "Lade...",
+  "deleteSelectedFiles": "Löschen",
+  "dialogCloseButton": "Schließen",
+  "uploadButtonSub": "Manuell Dateien hochladen",
+  "uploadButton": "Hochladen",
+  "file": "Datei",
+  "language": "Sprache",
+  "fileSize": "Dateigröße",
+  "uploadedAt": "Hochgeladen am",
+  "FileSelectorTitle": "Wähle deine Dateien aus...",
+  "fileSelectorSelectButton": "Auswählen",
+  "errorSavingLanguage": "Fehler beim Speichern der Sprache",
+  "login": "Anmelden",
+  "chatGPTRoleName": "ChatGPT",
+  "trialOverMessage": "Ihre Testversion ist abgelaufen.",
+  "resultRoleName": "Antworten",
+  "searchMessageIntroText": "Hier finden Sie relevante Auszüge aus Ihren Dokumenten, die potenziell Antwort auf Ihre Frage geben könnten.",
+  "searchMessageStatText": "Ergebnis {{index}} aus \"{{filename}}\" mit einer Genauigkeit von {{accuracy}}%",
+  "searchMessageIntroHint": "Bitte stellen Sie sicher, dass alle sensiblen Informationen bereits identifiziert und entsprechend pseudonymisiert wurden, bevor Sie fortfahren.",
+  "cancelEditResultsButton": "Verwerfen",
+  "save": "Speichern",
+  "editResultsButton": "Bearbeiten",
+  "sendToChatGPTButton": "Senden",
+  "chatGPTSendHint": "Übermittelt Frage und Antworten pseudonymisiert an ChatGPT.",
+  "renameRoom": "Raum umbenennen",
+  "deleteRoom": "Raum löschen",
+  "errorFetchingRooms": "Fehler beim Abrufen der Räume",
+  "roomCreatedSuccessfully": "Raum erfolgreich erstellt",
+  "errorCreateRoom": "Fehler beim Erstellen des Raums",
+  "roomRenamedSuccessfully": "Raum erfolgreich umbenannt",
+  "errorRenameRoom": "Fehler beim Umbenennen des Raums",
+  "roomDeletedSuccessfully": "Raum erfolgreich gelöscht",
+  "errorDeleteRoom": "Fehler beim Löschen des Raums",
+  "createRoomButton": "Raum erstellen",
+  "roomNamePlaceholder": "Neuer Raumname...",
+  "settingsDrawerTitle": "Raum Einstellungen",
+  "promptTemplateLabel": "Prompt",
+  "promptTemplateSelectLabel": "Prompt Templates",
+  "promptTemplateOptionDE": "Prompt Template Deutsch",
+  "promptTemplateOptionEN": "Prompt Template Englisch",
+  "resultSentenceCountLabel": "Anzahl der Sätze vor und nach einem Ergebnis",
+  "actionSuccessful": "Aktion erfolgreich",
+  "actionFailed": "Aktion fehlgeschlagen",
+  "actionWarning": "Warnung",
+  "actionNotice": "Hinweis",
+  "tutorialCardsSubtitle": "Erstelle einen Raum und frage deine Dokumente",
+  "errorNoRoom": "Dieser Raum existiert nicht",
+  "errorUpdatingRoomDocuments": "Fehler beim Auswählen der Dateien",
+  "errorSendingMessage": "Fehler beim Senden der Nachricht",
+  "errorNotEnoughMessages": "Fehlende Nachrichten zum fortfahren",
+  "question": "Frage",
+  "context": "Kontext",
+  "errorSendingMessageToChatGPT": "Fehler beim Senden der Nachricht zu ChatGPT",
+  "isAnonymizedText": "Pseudonymisiert",
+  "isNotAnonymizedText": "Nicht Pseudonymisiert",
+  "exampleCardsSubtitle": "Testen Sie eine Beispielanfrage anhand der bereitgestellten Beispieldokumente",
+  "headerText": "ChatGPTfirewall",
+  "subheaderText": "Logge dich ein um ChatGPTfirewall auszuprobieren",
+  "documentation": "Dokumentation",
+  "landingPage": "Start",
+  "githubRepo": "Github",
+  "errorFetchingRoom": "Fehler beim Abrufen des Raums",
+  "settingsSavedSuccessfully": "Einstellungen erfolgreich gespeichert",
+  "errorSavingSettings": "Fehler beim Speichern der Einstellungen",
+  "emptyStateBodyTextStrong": "Keine Dateien ausgewählt",
+  "emptyStateBodyText": "Bitte wählen Sie die Dateien aus, die Sie für den Chat verwenden möchten.",
+  "addFilesEmptyPage": "Dateien auswählen"
+}

public/locales/de/translation_old.json

@@ -0,0 +1,37 @@
+{
+  "1": {
+    " Upload your data or select it via your Cloud": ""
+  },
+  "2": {
+    " Ask questions that your data can answer": ""
+  },
+  "You can try out the demo": "",
+  "loginAndAskAnything": "",
+  "Logout": "Ausloggen",
+  "Login": "Einloggen",
+  "card1Upload": "",
+  "card2Ask": "",
+  "orText": "",
+  "card3Demo": "",
+  "logout": "Ausloggen",
+  "File": "",
+  "Language": "",
+  "File Size": "",
+  "tutorialCardStep1": "1. Laden Sie Ihre Daten hoch oder wählen Sie sie über Ihre Cloud aus",
+  "tutorialCardStep2": "2. Stellen Sie Fragen, die Ihre Daten beantworten können",
+  "tutorialCardDemoLink": "Sie können die Demo ausprobieren",
+  "or": "oder",
+  "guideCardDemoTitle": "Demo ausprobieren",
+  "guideCardDemoContent": "Nutze die Demo-Seite, um ein vorgefertigtes Beispiel mit Dateien und Fragen zu sehen.",
+  "guideCardDemoText": "",
+  "uploading": "Lade hoch...",
+  "uploadSuccess": "Upload erfolgreich",
+  "uploadError": "Upload fehlgeschlagen",
+  "demoPageChatWithData": "Demo Seite: Chatten Sie mit Ihren Daten",
+  "errorNoRoomSelected": "Es wurde kein Ru",
+  "errorNoFilesSelected": "",
+  "updatingRoomDocumentsSuccessfully": "",
+  "saveEditResultsButton": "Speichern",
+  "saveSettings": "Speichern",
+  "chatWithYourData": ""
+}

public/locales/en/translation.json

@@ -0,0 +1,86 @@
+{
+  "guideCardStep1Title": "Upload Data",
+  "guideCardStep1Content": "Choose or upload files.",
+  "guideCardStep2Title": "Create Room",
+  "guideCardStep2Content": "Set up a room for your files.",
+  "guideCardStep3Title": "Ask Questions",
+  "guideCardStep3Content": "Get answers about your documents.",
+  "guideCardDemoLinkText": "...or test the demo!",
+  "unexpectedErrorOccurred": "An unexpected error occurred",
+  "errorfetchingFiles": "Error fetching files",
+  "fileUploadSuccess": "Files uploaded successfully",
+  "errorUploadingFiles": "Error uploading files",
+  "filesDeletedSuccess": "Files deleted successfully",
+  "errorDeletingFiles": "Error deleting files",
+  "fileExplorerDialogButton": "Files",
+  "fileExplorerTitle": "Your Files",
+  "nextCloudButtonSub": "Connect with Nextcloud",
+  "nextCloudButton": "Nextcloud",
+  "loading": "Loading...",
+  "deleteSelectedFiles": "Delete",
+  "dialogCloseButton": "Close",
+  "uploadButtonSub": "Upload files manually",
+  "uploadButton": "Upload",
+  "file": "File",
+  "language": "Language",
+  "fileSize": "File Size",
+  "uploadedAt": "Uploaded at",
+  "FileSelectorTitle": "Select your files...",
+  "fileSelectorSelectButton": "Select",
+  "errorSavingLanguage": "Error while saving language",
+  "login": "Login",
+  "chatGPTRoleName": "ChatGPT",
+  "trialOverMessage": "Your trial is over.",
+  "resultRoleName": "Answers",
+  "searchMessageIntroText": "Below are excerpts from your documents that may potentially answer your question.",
+  "searchMessageStatText": "Result {{index}} from \"{{filename}}\" with {{accuracy}}% accuracy.",
+  "searchMessageIntroHint": "Please ensure that all sensitive data have been identified and appropriately pseudonymized before proceeding.",
+  "cancelEditResultsButton": "Discard",
+  "save": "Save",
+  "editResultsButton": "Edit",
+  "sendToChatGPTButton": "Send",
+  "chatGPTSendHint": "Submits question and answers in pseudonymized form to ChatGPT.",
+  "renameRoom": "Rename Room",
+  "deleteRoom": "Delete Room",
+  "errorFetchingRooms": "Error fetching rooms",
+  "roomCreatedSuccessfully": "Room created successfully",
+  "errorCreateRoom": "Error creating room",
+  "roomRenamedSuccessfully": "Room renamed successfully",
+  "errorRenameRoom": "Error renaming room",
+  "roomDeletedSuccessfully": "Room deleted successfully",
+  "errorDeleteRoom": "Error deleting room",
+  "createRoomButton": "Create Room",
+  "roomNamePlaceholder": "New Roomname...",
+  "settingsDrawerTitle": "Room Settings",
+  "promptTemplateLabel": "Prompt",
+  "promptTemplateSelectLabel": "Prompt Templates",
+  "promptTemplateOptionDE": "Prompt Template German",
+  "promptTemplateOptionEN": "Prompt Template English",
+  "resultSentenceCountLabel": "Number of sentences before and after the result",
+  "actionSuccessful": "Action successful",
+  "actionFailed": "Action failed",
+  "actionWarning": "Warning",
+  "actionNotice": "Notice",
+  "tutorialCardsSubtitle": "Create a room and ask your documents",
+  "errorNoRoom": "This room doesn't exist",
+  "errorUpdatingRoomDocuments": "Error while selecting files",
+  "errorSendingMessage": "Error while sending message",
+  "errorNotEnoughMessages": "Missing messages to continue",
+  "question": "Question",
+  "context": "Context",
+  "errorSendingMessageToChatGPT": "Error while sending message to ChatGPT",
+  "isAnonymizedText": "Pseudonymized",
+  "isNotAnonymizedText": "Not Pseudonymized",
+  "exampleCardsSubtitle": "Try out a sample query using the provided example documents.",
+  "headerText": "ChatGPTfirewall",
+  "subheaderText": "Log in to start your session with ChatGPTFirewall.",
+  "documentation": "Documentation",
+  "landingPage": "Home",
+  "githubRepo": "Github",
+  "errorFetchingRoom": "Error fetching room",
+  "settingsSavedSuccessfully": "Settings saved successfully",
+  "errorSavingSettings": "Error while saving settings",
+  "emptyStateBodyTextStrong": "No Files Selected",
+  "emptyStateBodyText": "Please select the files you wish to use for chatting.",
+  "addFilesEmptyPage": "Select Files"
+}

public/locales/en/translation_old.json

@@ -0,0 +1,38 @@
+{
+  "1": {
+    " Upload your data or select it via your Cloud": ""
+  },
+  "2": {
+    " Ask questions that your data can answer": ""
+  },
+  "You can try out the demo": "",
+  "loginAndAskAnything": "",
+  "Logout": "",
+  "Login": "",
+  "Login and ask anything": "",
+  "card1Upload": "",
+  "card2Ask": "",
+  "orText": "",
+  "card3Demo": "",
+  "logout": "Logout",
+  "File": "",
+  "Language": "",
+  "File Size": "",
+  "tutorialCardStep1": "1. Upload your data or select it via your Cloud",
+  "tutorialCardStep2": "2. Ask questions that your data can answer",
+  "tutorialCardDemoLink": "You can try out the demo",
+  "or": "or",
+  "guideCardDemoTitle": "Try the Demo",
+  "guideCardDemoContent": "Use the demo page to see a pre-selected example with files and questions.",
+  "guideCardDemoText": "",
+  "uploading": "Loading...",
+  "uploadSuccess": "Upload successful",
+  "uploadError": "Upload failed",
+  "demoPageChatWithData": "Demo Page: Chat with your data",
+  "errorNoRoomSelected": "",
+  "errorNoFilesSelected": "",
+  "updatingRoomDocumentsSuccessfully": "",
+  "saveEditResultsButton": "Save",
+  "saveSettings": "",
+  "chatWithYourData": ""
+}

src/App.tsx

@@ -0,0 +1,30 @@
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+
+import Layout from './pages/Layout/Layout';
+import Demo from './pages/Demo/Demo';
+import Chat from './pages/Chat/Chat';
+import Room from './pages/Room/Room';
+import Page404 from './pages/Page404/Page404';
+import ProtectedRoute from './components/common/ProtectedRoute/ProtectedRoute';
+
+function App() {
+  return (
+    <Router>
+      <Routes>
+        <Route path="/" element={<Layout />}>
+          <Route element={<ProtectedRoute />}>
+            <Route index element={<Chat />} />
+            <Route path="demo" element={<Demo />} />
+            <Route path="chat">
+              <Route index element={<Chat />} />
+              <Route path="room/:id" element={<Room />} />
+            </Route>
+          </Route>
+          <Route path="*" element={<Page404 />} />
+        </Route>
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;

src/api/Request.ts

@@ -0,0 +1,28 @@
+import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
+
+async function Request<T>(config: AxiosRequestConfig): Promise<T> {
+  try {
+    // Accessing token for subsequent requests
+    const token = localStorage.getItem('userToken');
+    if (token == null) {
+      console.group('get token');
+    } else {
+      axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+    }
+    const response: AxiosResponse<T> = await axios(config);
+    return response.data;
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      console.error(
+        `API call failed with status: ${error.response?.status}`,
+        error.message
+      );
+      throw new Error(`API call failed: ${error.response?.status}`);
+    } else {
+      console.error('An unexpected error occurred', error);
+      throw error;
+    }
+  }
+}
+
+export default Request;

src/api/fetchAPI.ts

@@ -0,0 +1,23 @@
+async function fetchAPI<TBody, TResponse>(
+  url: string,
+  method: 'GET' | 'POST' | 'PUT' | 'DELETE' = 'POST',
+  body?: TBody,
+  headers?: HeadersInit
+): Promise<TResponse> {
+  const response = await fetch(url, {
+    method,
+    headers: {
+      'Content-Type': 'application/json',
+      ...headers
+    },
+    body: JSON.stringify(body)
+  });
+
+  if (!response.ok) {
+    throw new Error(`HTTP error! Status: ${response.status}`);
+  }
+
+  return response.json() as TResponse;
+}
+
+export default fetchAPI;

src/api/fileApi.ts

@@ -0,0 +1,35 @@
+import Request from './Request';
+import { File } from '../models/File';
+
+export async function getFiles(auth0_id: string): Promise<File[]> {
+  return Request<File[]>({
+    url: '/api/documents',
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    data: JSON.stringify({
+      auth0_id: auth0_id
+    })
+  });
+}
+
+export const getFile = (documentID: string): Promise<File> => {
+  return Request<File>({ url: `/api/documents/${documentID}`, method: 'GET' });
+};
+
+export async function createFiles(data: FormData): Promise<File[]> {
+  return Request<File[]>({
+    url: '/api/documents/upload',
+    method: 'POST',
+    data: data
+  });
+}
+
+export function deleteFiles(fileIds: string[]): Promise<void> {
+  return Request<void>({
+    url: '/api/documents',
+    method: 'DELETE',
+    data: fileIds
+  });
+}

src/api/messageApi.ts

@@ -0,0 +1,24 @@
+import { Message } from '../models/Message';
+import Request from './Request';
+
+export const createSearchMessage = (message: Message): Promise<Message> => {
+  return Request({
+    url: '/api/messages/search',
+    method: 'POST',
+    data: message
+  });
+};
+
+export const createChatGPTMessage = (
+  message: Message,
+  demo?: boolean
+): Promise<Message> => {
+  const baseUrl = '/api/messages/chatgpt';
+  const url = demo ? `${baseUrl}?demo=true` : baseUrl;
+
+  return Request({
+    url: url,
+    method: 'POST',
+    data: message
+  });
+};

src/api/roomsApi.ts

@@ -0,0 +1,47 @@
+import { Room } from '../models/Room';
+import Request from './Request';
+
+export const getRooms = (userAuth0Id: string): Promise<Room[]> => {
+  return Request<Room[]>({
+    url: `/api/rooms?user_auth0_id=${userAuth0Id}`,
+    method: 'GET'
+  });
+};
+
+export const getRoom = (roomId: string): Promise<Room> => {
+  return Request<Room>({ url: `/api/rooms/${roomId}/`, method: 'GET' });
+};
+
+export const createRoom = (
+  user_auth0_id: string,
+  room_name: string
+): Promise<Room> => {
+  return Request<Room>({
+    url: '/api/rooms',
+    method: 'POST',
+    data: { user_auth0_id: user_auth0_id, room_name: room_name }
+  });
+};
+
+export const updateRoom = (room: Room): Promise<Room> => {
+  return Request<Room>({
+    url: `/api/rooms/${room.id}/`,
+    method: 'PUT',
+    data: room
+  });
+};
+
+export const updateRoomFiles = (
+  roomId: string,
+  documentIds: string[]
+): Promise<Room> => {
+  return Request<Room>({
+    url: `/api/rooms/${roomId}/documents/`,
+    method: 'POST',
+    data: { document_ids: documentIds }
+  });
+};
+
+export const deleteRoom = (roomId: string): Promise<Room> => {
+  return Request<Room>({ url: `/api/rooms/${roomId}/`, method: 'DELETE' });
+};

src/api/usersApi.ts

@@ -0,0 +1,18 @@
+import { User } from '../models/User';
+import Request from './Request';
+
+export const getUser = async (auth0_id: string): Promise<User> => {
+  return Request<User>({ url: `/api/user/${auth0_id}/`, method: 'GET' });
+};
+
+export const createUser = async (user: User): Promise<User> => {
+  return Request<User>({ url: '/api/user/', method: 'POST', data: user });
+};
+
+export const updateUser = async (user: User): Promise<User> => {
+  return Request<User>({
+    url: `/api/user/${user.auth0_id}/`,
+    method: 'PUT',
+    data: user
+  });
+};

src/components/common/Cards/CustomCard.tsx

@@ -0,0 +1,34 @@
+import { Divider } from '@fluentui/react-components';
+import CustomCardStyles from './CustomCardStyles';
+
+interface CustomCardProps {
+  title?: string;
+  step?: string;
+  value?: string;
+  onClick?: (value?: string) => void;
+  children?: React.ReactNode;
+}
+
+const CustomCard = ({
+  step,
+  title,
+  value,
+  onClick,
+  children
+}: CustomCardProps) => {
+  const styles = CustomCardStyles();
+  return (
+    <div className={styles.guideCard} onClick={() => onClick?.(value)}>
+      <div>
+        <div className={styles.header}>
+          <div className={styles.step}>{step}</div>
+          <div className={styles.title}>{title}</div>
+        </div>
+        <Divider />
+        <div className={styles.content}> {children}</div>
+      </div>
+    </div>
+  );
+};
+
+export default CustomCard;

src/components/common/Cards/CustomCardStyles.tsx

@@ -0,0 +1,52 @@
+import { makeStyles, tokens, shorthands } from '@fluentui/react-components';
+
+const CustomCardStyles = makeStyles({
+  guideCard: {
+    boxShadow: tokens.shadow16,
+    width: '250px',
+    minHeight: '100px',
+    display: 'flex',
+    flexDirection: 'column',
+    ...shorthands.margin(tokens.spacingVerticalXL, tokens.spacingHorizontalXL),
+    ...shorthands.padding(tokens.spacingVerticalL, tokens.spacingHorizontalL),
+    ...shorthands.borderRadius(tokens.borderRadiusLarge),
+    ':hover': {
+      boxShadow: tokens.shadow28,
+      '& .step': {
+        backgroundColor: tokens.colorBrandBackground,
+        color: tokens.colorNeutralBackground1
+      }
+    }
+  },
+  step: {
+    ...shorthands.padding(
+      tokens.spacingVerticalXXS,
+      tokens.spacingHorizontalXXS
+    ),
+    fontSize: tokens.fontSizeBase600,
+    fontWeight: tokens.fontWeightBold,
+    color: tokens.colorBrandBackground,
+    backgroundColor: tokens.colorNeutralBackground1,
+    ...shorthands.borderRadius(tokens.borderRadiusCircular),
+    width: '32px',
+    height: '32px',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: tokens.spacingHorizontalM
+  },
+  title: {
+    fontSize: tokens.fontSizeBase500,
+    fontWeight: tokens.fontWeightSemibold
+  },
+  content: {
+    fontSize: tokens.fontSizeBase400,
+    ...shorthands.margin(tokens.spacingVerticalS, 0)
+  },
+  header: {
+    display: 'flex',
+    alignItems: 'center'
+  }
+});
+
+export default CustomCardStyles;

src/components/common/Cards/ExampleCards/ExampleCards.tsx

@@ -0,0 +1,64 @@
+import { useTranslation } from 'react-i18next';
+import CustomCard from '../CustomCard';
+import ExampleCardsStyles from './ExampleCardsStyles';
+
+export type Example = {
+  text: string;
+  value: string;
+};
+
+const EXAMPLES_DE: Example[] = [
+  {
+    text: 'Was ist auf der Weinversteigerung in Trier passiert?',
+    value: 'Was ist auf der Weinversteigerung in Trier passiert?'
+  },
+  {
+    text: 'Worüber ist der Edelmann E erbost?',
+    value: 'Worüber ist der Edelmann E erbost??'
+  },
+  {
+    text: 'Warum wurde B die Einreise in die USA verweigert?',
+    value: 'Warum wurde B die Einreise in die USA verweigert?'
+  }
+];
+
+const EXAMPLES_EN: Example[] = [
+  {
+    text: 'What did Detective Miller discover?',
+    value: 'What did Detective Miller discover?'
+  },
+  {
+    text: 'What stories does Willow have?',
+    value: 'What stories does Willow have?'
+  },
+  {
+    text: "How many people were in Max's group? ",
+    value: "How many people were in Max's group?"
+  }
+];
+
+interface ExampleCardsProps {
+  onExampleClicked: (value?: string) => void;
+}
+
+export const ExampleCards = ({ onExampleClicked }: ExampleCardsProps) => {
+  const styles = ExampleCardsStyles();
+  const { i18n } = useTranslation();
+  const examples = i18n.language === 'de' ? EXAMPLES_DE : EXAMPLES_EN;
+  return (
+    <div className={styles.examplesCardList}>
+      {examples.map((example, i) => (
+        <CustomCard
+          key={i}
+          step={`${i + 1}.`}
+          value={example.value}
+          onClick={onExampleClicked}
+        >
+          {example.text}
+        </CustomCard>
+      ))}
+    </div>
+  );
+};
+
+export default ExampleCards;

src/components/common/Cards/ExampleCards/ExampleCardsStyles.tsx

@@ -0,0 +1,29 @@
+import { makeStyles, tokens, shorthands } from '@fluentui/react-components';
+
+const ExampleCardsStyles = makeStyles({
+  container: {
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  examplesCardList: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    ...shorthands.gap('10px'),
+
+    justifyContent: 'center'
+  },
+  demoTextContainer: {
+    textAlign: 'center', // Zentriert den Text und den Link
+    marginTop: tokens.spacingVerticalM, // Gibt etwas Abstand nach oben
+    marginBottom: tokens.spacingVerticalM // Gibt etwas Abstand nach unten
+  },
+  demoLink: {
+    fontSize: tokens.fontSizeBase400, // Etwas größere Schrift für den Link
+    fontWeight: tokens.fontWeightSemibold, // Macht den Link fett
+    color: tokens.colorBrandBackground, // Farbe für den Link, nutze Brand-Farben für Klickbarkeit
+    ...shorthands.margin(tokens.spacingVerticalS, 0),
+    paddingBottom: '65px'
+  }
+});
+
+export default ExampleCardsStyles;

src/components/common/Cards/GuideCards/GuideCards.tsx

@@ -0,0 +1,32 @@
+import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import CustomCard from '../CustomCard';
+import GuideCardsStyles from './GuideCardsStyles';
+
+const GuideCards = () => {
+  const styles = GuideCardsStyles();
+  const { t } = useTranslation();
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.guideCardList}>
+        <CustomCard step="1." title={t('guideCardStep1Title')}>
+          {t('guideCardStep1Content')}
+        </CustomCard>
+        <CustomCard step="2." title={t('guideCardStep2Title')}>
+          {t('guideCardStep2Content')}
+        </CustomCard>
+        <CustomCard step="3." title={t('guideCardStep3Title')}>
+          {t('guideCardStep3Content')}
+        </CustomCard>
+      </div>
+      <div className={styles.demoTextContainer}>
+        <Link to="/demo" className={styles.demoLink}>
+          {t('guideCardDemoLinkText')}
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default GuideCards;

src/components/common/Cards/GuideCards/GuideCardsStyles.tsx

@@ -0,0 +1,28 @@
+import { makeStyles, tokens, shorthands } from '@fluentui/react-components';
+
+const GuideCardsStyles = makeStyles({
+  container: {
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  guideCardList: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    ...shorthands.gap('10px'),
+    justifyContent: 'center'
+  },
+  demoTextContainer: {
+    textAlign: 'center', // Zentriert den Text und den Link
+    marginTop: tokens.spacingVerticalM, // Gibt etwas Abstand nach oben
+    marginBottom: tokens.spacingVerticalM // Gibt etwas Abstand nach unten
+  },
+  demoLink: {
+    fontSize: tokens.fontSizeBase400, // Etwas größere Schrift für den Link
+    fontWeight: tokens.fontWeightSemibold, // Macht den Link fett
+    color: tokens.colorBrandBackground, // Farbe für den Link, nutze Brand-Farben für Klickbarkeit
+    ...shorthands.margin(tokens.spacingVerticalS, 0),
+    paddingBottom: '65px'
+  }
+});
+
+export default GuideCardsStyles;

src/components/common/FileExplorer/FileExplorer.tsx

@@ -0,0 +1,179 @@
+import { KeyboardEvent, MouseEvent, useEffect, useState } from 'react';
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogBody,
+  DialogContent,
+  DialogSurface,
+  DialogTitle,
+  DialogTrigger,
+  CompoundButton,
+  Spinner,
+  OnSelectionChangeData
+} from '@fluentui/react-components';
+import { DocumentFolder24Regular } from '@fluentui/react-icons';
+import { useTranslation } from 'react-i18next';
+import FileExplorerStyles from './FileExplorerStyles';
+import { FileList as FileListComp } from '../FileList/FileList';
+import NextCloudIcon from './NextCloudIcon.svg?react';
+import UploadButton from './UploadButton';
+import { useUser } from '../../../context/UserProvider';
+import { File as FileType } from '../../../models/File';
+import { getFiles, createFiles, deleteFiles } from '../../../api/fileApi';
+import { useToast } from '../../../context/ToastProvider';
+
+export const FileExplorer = () => {
+  const styles = FileExplorerStyles();
+  const { t } = useTranslation();
+  const { user } = useUser();
+  const { showToast } = useToast();
+  const [files, setFiles] = useState<FileType[]>([]);
+  const [selectedFiles, setSelectedFiles] = useState(new Set());
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+
+  useEffect(() => {
+    if (!user) return;
+
+    const getAllDocuments = () => {
+      setIsLoading(true);
+      getFiles(user.auth0_id)
+        .then((response) => {
+          setFiles(response);
+        })
+        .catch((error) => {
+          const errorMessage =
+            error.response?.data?.error || t('unexpectedErrorOccurred');
+          showToast(`${t('errorfetchingFiles')}: ${errorMessage}`, 'error');
+        })
+        .finally(() => {
+          setIsLoading(false);
+        });
+    };
+
+    getAllDocuments();
+  }, [user, showToast, t]);
+
+  const handleFileUpload = (selectedFiles: FileList) => {
+    const formData = new FormData();
+    const tempFiles: FileType[] = [];
+
+    for (const rawFile of selectedFiles) {
+      formData.append('files', rawFile);
+      tempFiles.push({
+        filename: rawFile.name,
+        fileSize: rawFile.size,
+        isUploading: true
+      });
+    }
+
+    setFiles((prevFiles) => [...prevFiles, ...tempFiles]);
+    formData.append('user', user!.auth0_id as string);
+
+    createFiles(formData)
+      .then((response) => {
+        setFiles((prevFiles) =>
+          prevFiles.map((file) => {
+            const updatedFile = response.find(
+              (resFile) => resFile.filename === file.filename
+            );
+            return updatedFile ? { ...updatedFile, isUploading: false } : file;
+          })
+        );
+        showToast(t('fileUploadSuccess'), 'success');
+      })
+      .catch((error) => {
+        setFiles((prevFiles) => prevFiles.filter((file) => !file.isUploading));
+        const errorMessage =
+          error.response?.data?.error || t('unexpectedErrorOccurred');
+        showToast(`${t('errorUploadingFiles')}: ${errorMessage}`, 'error');
+      });
+  };
+
+  const handleSelectedFiles = (
+    _e: MouseEvent | KeyboardEvent,
+    data: OnSelectionChangeData
+  ) => {
+    const selectedFileIds = [...data.selectedItems];
+    setSelectedFiles(new Set(selectedFileIds));
+  };
+
+  const deleteSelectedFiles = () => {
+    const fileIdsToDelete: string[] = Array.from(selectedFiles).map(
+      (id) => id as string
+    );
+
+    deleteFiles(fileIdsToDelete)
+      .then(() => {
+        setFiles((prevFiles) =>
+          prevFiles.filter((file) => !selectedFiles.has(file.id))
+        );
+        setSelectedFiles(new Set());
+        showToast(t('filesDeletedSuccess'), 'success');
+      })
+      .catch((error) => {
+        const errorMessage =
+          error.response?.data?.error || t('unexpectedErrorOccurred');
+        showToast(`${t('errorDeletingFiles')}: ${errorMessage}`, 'error');
+      });
+  };
+
+  return (
+    <Dialog>
+      <DialogTrigger disableButtonEnhancement>
+        <Button
+          appearance="primary"
+          icon={<DocumentFolder24Regular />}
+          iconPosition="after"
+          size="large"
+          className={styles.triggerButton}
+        >
+          {t('fileExplorerDialogButton')}
+        </Button>
+      </DialogTrigger>
+      <DialogSurface className={styles.surface}>
+        <DialogBody>
+          <DialogTitle>{t('fileExplorerTitle')}</DialogTitle>
+          <DialogContent className={styles.content}>
+            <div className={styles.actionButtons}>
+              <UploadButton onFilesSelected={handleFileUpload} />
+              <CompoundButton
+                icon={<NextCloudIcon />}
+                appearance="subtle"
+                size="small"
+                secondaryContent={t('nextCloudButtonSub')}
+                disabled
+              >
+                {t('nextCloudButton')}
+              </CompoundButton>
+            </div>
+            {isLoading ? (
+              <Spinner label={t('loading')} />
+            ) : (
+              <div className={styles.fileList}>
+                <Button
+                  disabled={selectedFiles.size === 0}
+                  onClick={deleteSelectedFiles}
+                  className={styles.deleteButton}
+                >
+                  {t('deleteSelectedFiles')}
+                </Button>
+                <FileListComp
+                  files={files}
+                  onSelectionChange={handleSelectedFiles}
+                />
+              </div>
+            )}
+          </DialogContent>
+          <DialogActions>
+            <DialogTrigger disableButtonEnhancement>
+              <Button appearance="secondary">{t('dialogCloseButton')}</Button>
+            </DialogTrigger>
+          </DialogActions>
+        </DialogBody>
+      </DialogSurface>
+    </Dialog>
+  );
+};
+
+export default FileExplorer;

src/components/common/FileExplorer/FileExplorerStyles.tsx

@@ -0,0 +1,29 @@
+import { makeStyles, tokens } from '@fluentui/react-components';
+
+const FileExplorerStyles = makeStyles({
+  triggerButton: {
+    fontWeight: tokens.fontWeightMedium
+  },
+  surface: {
+    maxWidth: '60%',
+    minWidth: '25%'
+  },
+  content: {
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  actionButtons: {
+    display: 'flex',
+    justifyContent: 'space-around',
+    marginBottom: tokens.spacingVerticalL
+  },
+  fileList: {
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  deleteButton: {
+    alignSelf: 'end'
+  }
+});
+
+export default FileExplorerStyles;

src/components/common/FileExplorer/UploadButton.tsx

@@ -0,0 +1,47 @@
+import { CompoundButton } from '@fluentui/react-components';
+import { ArrowUpload24Regular } from '@fluentui/react-icons';
+import { useTranslation } from 'react-i18next';
+import { useRef, ChangeEvent } from 'react';
+
+interface UploadButtonProps {
+  onFilesSelected: (selectedFiles: FileList) => void;
+}
+
+export const UploadButton = ({ onFilesSelected }: UploadButtonProps) => {
+  const { t } = useTranslation();
+  const hiddenFileInput = useRef<HTMLInputElement | null>(null);
+
+  const handleClick = () => {
+    if (hiddenFileInput.current) {
+      hiddenFileInput.current.click();
+    }
+  };
+
+  const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files && event.target.files.length > 0) {
+      onFilesSelected(event.target.files);
+    }
+  };
+
+  return (
+    <CompoundButton
+      icon={<ArrowUpload24Regular />}
+      appearance="subtle"
+      size="small"
+      secondaryContent={t('uploadButtonSub')}
+      onClick={handleClick}
+    >
+      {t('uploadButton')}
+      <input
+        type="file"
+        style={{ display: 'none' }}
+        ref={hiddenFileInput}
+        onChange={handleFileChange}
+        multiple
+        accept=".pdf,.docx,.doc,.txt,.rtf,.html,.xml,.csv,.md"
+      />
+    </CompoundButton>
+  );
+};
+
+export default UploadButton;

src/components/common/FileList/FileList.tsx

@@ -0,0 +1,216 @@
+import {
+  DataGrid,
+  DataGridBody,
+  DataGridCell,
+  DataGridHeader,
+  DataGridHeaderCell,
+  DataGridRow,
+  OnSelectionChangeData,
+  SelectionItemId,
+  Spinner,
+  TableCellLayout,
+  TableColumnDefinition,
+  createTableColumn
+} from '@fluentui/react-components';
+import FileListStyles from './FileListStyles';
+import { File } from '../../../models/File';
+import { useTranslation } from 'react-i18next';
+import ReactCountryFlag from 'react-country-flag';
+import { format } from 'date-fns';
+import { KeyboardEvent, MouseEvent } from 'react';
+
+const langToCountryCode = (lang: string) => {
+  const map: { [key: string]: string } = {
+    de: 'DE',
+    en: 'US'
+  };
+
+  return map[lang] || 'US';
+};
+
+const formatFileSize = (size: number): string => {
+  if (size < 1024) return size + ' Bytes';
+  else if (size < 1024 * 1024) return (size / 1024).toFixed(1) + ' KB';
+  else if (size < 1024 * 1024 * 1024)
+    return (size / 1024 / 1024).toFixed(1) + ' MB';
+  else return (size / 1024 / 1024 / 1024).toFixed(1) + ' GB';
+};
+
+interface FileListProps {
+  files: File[];
+  selectedFileIds?: Set<SelectionItemId>;
+  onSelectionChange?: (
+    e: MouseEvent | KeyboardEvent,
+    data: OnSelectionChangeData
+  ) => void;
+}
+
+export const FileList = ({
+  files,
+  selectedFileIds,
+  onSelectionChange
+}: FileListProps) => {
+  const styles = FileListStyles();
+  const { t } = useTranslation();
+
+  const columns: TableColumnDefinition<File>[] = [
+    createTableColumn<File>({
+      columnId: 'isUploading',
+      renderHeaderCell: () => {
+        return '';
+      },
+      renderCell: (file) => {
+        return file.isUploading ? <Spinner size="tiny" /> : null;
+      }
+    }),
+    createTableColumn<File>({
+      columnId: 'file',
+      compare: (a, b) => {
+        return a.filename.localeCompare(b.filename);
+      },
+      renderHeaderCell: () => {
+        return t('file');
+      },
+      renderCell: (file) => {
+        const [fileName, fileExtension] = file.filename.split('.');
+        const file_icon = `https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/item-types/16/${fileExtension}.svg`;
+
+        return (
+          <TableCellLayout truncate className={styles.fileCell}>
+            <img
+              src={file_icon}
+              className={styles.fileIcon}
+              alt={`${fileExtension} file icon`}
+            />
+            <span className={styles.fileCellText}>{fileName}</span>
+          </TableCellLayout>
+        );
+      }
+    }),
+    createTableColumn<File>({
+      columnId: 'lang',
+      compare: (a, b) => {
+        const langA = a.lang || '';
+        const langB = b.lang || '';
+        return langA.localeCompare(langB);
+      },
+      renderHeaderCell: () => t('language'),
+      renderCell: (file) =>
+        file.lang ? (
+          <TableCellLayout
+            media={
+              <ReactCountryFlag
+                countryCode={langToCountryCode(file.lang)}
+                svg
+                className={styles.langIcon}
+                title={file.lang}
+              />
+            }
+          >
+            {file.lang.toUpperCase()}
+          </TableCellLayout>
+        ) : null
+    }),
+    createTableColumn<File>({
+      columnId: 'size',
+      compare: (a, b) => {
+        return a.fileSize - b.fileSize;
+      },
+      renderHeaderCell: () => {
+        return t('fileSize');
+      },
+      renderCell: (file) => {
+        return (
+          <TableCellLayout>{formatFileSize(file.fileSize)}</TableCellLayout>
+        );
+      }
+    }),
+    createTableColumn<File>({
+      columnId: 'uploadedAt',
+      compare: (a, b) => {
+        const dateA = a.uploadedAt ? a.uploadedAt.getTime() : 0;
+        const dateB = b.uploadedAt ? b.uploadedAt.getTime() : 0;
+        return dateB - dateA;
+      },
+      renderHeaderCell: () => t('uploadedAt'),
+      renderCell: (file) =>
+        file.uploadedAt ? (
+          <TableCellLayout>
+            {format(file.uploadedAt, 'dd.MM.yyyy HH:mm')}
+          </TableCellLayout>
+        ) : null
+    })
+  ];
+
+  const columnSizingOptions = {
+    isUploading: {
+      defaultWidth: 20,
+      minWidth: 20,
+      idealWidth: 20
+    },
+    file: {
+      defaultWidth: 240,
+      minWidth: 60,
+      idealWidth: 240
+    },
+    lang: {
+      defaultWidth: 80,
+      minWidth: 60,
+      idealWidth: 80
+    },
+    size: {
+      defaultWidth: 90,
+      minWidth: 90,
+      idealWidth: 90
+    },
+    uploadedAt: {
+      defaultWidth: 120,
+      minWidth: 120,
+      idealWidth: 120
+    }
+  };
+
+  return (
+    <DataGrid
+      items={files}
+      columns={columns}
+      sortable
+      subtleSelection
+      selectionMode="multiselect"
+      resizableColumns
+      columnSizingOptions={columnSizingOptions}
+      getRowId={(item) => item.id}
+      focusMode="composite"
+      selectedItems={selectedFileIds}
+      onSelectionChange={onSelectionChange}
+    >
+      <DataGridHeader>
+        <DataGridRow
+          selectionCell={{
+            checkboxIndicator: { 'aria-label': 'Select all rows' }
+          }}
+        >
+          {({ renderHeaderCell }) => (
+            <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
+          )}
+        </DataGridRow>
+      </DataGridHeader>
+      <DataGridBody<File>>
+        {({ item, rowId }) => (
+          <DataGridRow<File>
+            key={rowId}
+            selectionCell={{
+              checkboxIndicator: { 'aria-label': 'Select row' }
+            }}
+          >
+            {({ renderCell }) => (
+              <DataGridCell>{renderCell(item)}</DataGridCell>
+            )}
+          </DataGridRow>
+        )}
+      </DataGridBody>
+    </DataGrid>
+  );
+};
+
+export default FileList;

src/components/common/FileList/FileListStyles.tsx

@@ -0,0 +1,23 @@
+import { makeStyles, tokens } from '@fluentui/react-components';
+
+const FileListStyles = makeStyles({
+  fileIcon: {
+    verticalAlign: 'middle',
+    maxHeight: '16px',
+    maxWidth: '16px',
+    marginRight: tokens.spacingHorizontalS
+  },
+  langIcon: {
+    verticalAlign: 'middle',
+    maxHeight: '16px',
+    maxWidth: '16px'
+  },
+  fileCell: {
+    display: 'flex'
+  },
+  fileCellText: {
+    width: '100%'
+  }
+});
+
+export default FileListStyles;

src/components/common/FileSelector/FileSelector.tsx

@@ -0,0 +1,126 @@
+import { KeyboardEvent, MouseEvent, useEffect, useState } from 'react';
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogBody,
+  DialogContent,
+  DialogSurface,
+  DialogTitle,
+  DialogTrigger,
+  Spinner,
+  OnSelectionChangeData,
+  SelectionItemId,
+  DialogTriggerChildProps
+} from '@fluentui/react-components';
+import { useTranslation } from 'react-i18next';
+import FileSelectorStyles from './FileSelectorStyles';
+import { FileList as FileListComp } from '../FileList/FileList';
+import { useUser } from '../../../context/UserProvider';
+import { File, File as FileType } from '../../../models/File';
+import { getFiles } from '../../../api/fileApi';
+import { User } from '../../../models/User';
+interface FileSelectorProps {
+  onFilesSelected: (files: File[]) => void;
+  selectedFiles: File[];
+  triggerButton: (props: DialogTriggerChildProps) => JSX.Element;
+  passedUser?: User;
+}
+
+export const FileSelector = ({
+  onFilesSelected,
+  selectedFiles,
+  triggerButton,
+  passedUser
+}: FileSelectorProps) => {
+  const styles = FileSelectorStyles();
+  const { t } = useTranslation();
+  const { user: hookUser } = useUser();
+  const [files, setFiles] = useState<FileType[]>([]);
+  const [selectedFileIds, setSelectedFileIds] = useState<Set<SelectionItemId>>(
+    new Set()
+  );
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [dialogOpen, setDialogState] = useState<boolean>(false);
+
+  const user = passedUser || hookUser;
+
+  useEffect(() => {
+    if (!user || !dialogOpen) return;
+
+    const getAllDocuments = () => {
+      setIsLoading(true);
+      getFiles(user.auth0_id)
+        .then((response) => {
+          setFiles(response);
+        })
+        .catch((error) => {
+          console.error('Error fetching documents:', error);
+        })
+        .finally(() => {
+          setIsLoading(false);
+        });
+    };
+
+    getAllDocuments();
+  }, [user, dialogOpen]);
+
+  useEffect(() => {
+    const preSelectedIds = new Set(
+      selectedFiles
+        .filter((file) => file.id !== undefined)
+        .map((file) => file.id!)
+    );
+    setSelectedFileIds(preSelectedIds);
+  }, [selectedFiles]);
+
+  const handleSelectedFiles = (
+    _e: MouseEvent | KeyboardEvent,
+    data: OnSelectionChangeData
+  ) => {
+    setSelectedFileIds(new Set(data.selectedItems));
+  };
+
+  const selectFiles = () => {
+    const selectedFiles = files.filter((file) => selectedFileIds.has(file.id!));
+    onFilesSelected(selectedFiles);
+    setDialogState(false);
+  };
+
+  return (
+    <Dialog
+      open={dialogOpen}
+      onOpenChange={(_event, data) => setDialogState(data.open)}
+    >
+      <DialogTrigger disableButtonEnhancement>{triggerButton}</DialogTrigger>
+      <DialogSurface className={styles.surface}>
+        <DialogBody>
+          <DialogTitle>{t('FileSelectorTitle')}</DialogTitle>
+          <DialogContent className={styles.content}>
+            {isLoading ? (
+              <Spinner label={t('loading')} />
+            ) : (
+              <div className={styles.fileList}>
+                <FileListComp
+                  selectedFileIds={selectedFileIds}
+                  files={files}
+                  onSelectionChange={handleSelectedFiles}
+                />
+              </div>
+            )}
+          </DialogContent>
+          <DialogActions>
+            <DialogTrigger disableButtonEnhancement>
+              <Button appearance="secondary">{t('dialogCloseButton')}</Button>
+            </DialogTrigger>
+            <Button appearance="primary" onClick={selectFiles}>
+              {t('fileSelectorSelectButton')}
+            </Button>
+          </DialogActions>
+        </DialogBody>
+      </DialogSurface>
+    </Dialog>
+  );
+};
+
+export default FileSelector;

src/components/common/FileSelector/FileSelectorStyles.tsx

@@ -0,0 +1,29 @@
+import { makeStyles, tokens } from '@fluentui/react-components';
+
+const FileSelectorStyles = makeStyles({
+  triggerButton: {
+    fontWeight: tokens.fontWeightMedium
+  },
+  surface: {
+    maxWidth: '60%',
+    minWidth: '25%'
+  },
+  content: {
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  actionButtons: {
+    display: 'flex',
+    justifyContent: 'space-around',
+    marginBottom: tokens.spacingVerticalL
+  },
+  fileList: {
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  deleteButton: {
+    alignSelf: 'end'
+  }
+});
+
+export default FileSelectorStyles;

src/components/common/LanguageSelector/LanguageSelector.tsx

@@ -0,0 +1,85 @@
+import { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Dropdown,
+  Option,
+  OptionOnSelectData,
+  SelectionEvents
+} from '@fluentui/react-components';
+import LanguageSelectorStyles from './LanguageSelectorStyles';
+import { useUser } from '../../../context/UserProvider';
+import { updateUser } from '../../../api/usersApi';
+import { useToast } from '../../../context/ToastProvider';
+
+const LanguageSelector = () => {
+  const styles = LanguageSelectorStyles();
+  const { t, i18n } = useTranslation();
+  const { user, setUser } = useUser();
+  const { showToast } = useToast();
+
+  const options = [
+    { value: 'en', text: 'EN' },
+    { value: 'de', text: 'DE' }
+  ];
+
+  const [selectedLanguage, setSelectedLanguage] = useState(() => {
+    return user?.lang || localStorage.getItem('cgfwLanguage') || i18n.language;
+  });
+
+  const defaultOption = options.find(
+    (option) => option.value === selectedLanguage,
+    { value: 'en', text: 'EN' }
+  );
+
+  useEffect(() => {
+    const storedLanguage = localStorage.getItem('cgfwLanguage');
+    if (storedLanguage && storedLanguage !== i18n.language) {
+      i18n.changeLanguage(storedLanguage);
+    }
+  }, [i18n]);
+
+  const handleChangeLanguage = (
+    _: SelectionEvents,
+    data: OptionOnSelectData
+  ) => {
+    const newLanguage = data.optionValue;
+    if (newLanguage && newLanguage !== selectedLanguage) {
+      setSelectedLanguage(newLanguage);
+      localStorage.setItem('cgfwLanguage', newLanguage);
+      i18n.changeLanguage(newLanguage);
+
+      if (user) {
+        const updatedUser = { ...user, lang: newLanguage };
+        updateUser(updatedUser)
+          .then((userResponse) => {
+            setUser(userResponse);
+          })
+          .catch((error) => {
+            const errorMessage =
+              error.response?.data?.error || t('unexpectedErrorOccurred');
+            showToast(`${t('errorSavingLanguage')}: ${errorMessage}`, 'error');
+          });
+      }
+    }
+  };
+
+  return (
+    <Dropdown
+      defaultValue={defaultOption?.text}
+      onOptionSelect={handleChangeLanguage}
+      className={styles.dropdown}
+    >
+      {options.map((option) => (
+        <Option
+          key={option.value}
+          value={option.value}
+          className={styles.option}
+        >
+          {option.text}
+        </Option>
+      ))}
+    </Dropdown>
+  );
+};
+
+export default LanguageSelector;

src/components/common/LanguageSelector/LanguageSelectorStyles.tsx

@@ -0,0 +1,14 @@
+import { makeStyles } from '@fluentui/react-components';
+
+const LanguageSelectorStyles = makeStyles({
+  dropdown: {
+    width: 'auto',
+    minWidth: '32px'
+  },
+  option: {
+    width: 'auto',
+    minWidth: '32px'
+  }
+});
+
+export default LanguageSelectorStyles;

src/components/common/LoginButton/LoginButton.tsx

@@ -0,0 +1,33 @@
+import { useAuth0 } from '@auth0/auth0-react';
+import { useTranslation } from 'react-i18next';
+import LoginButtonStyles from './LoginButtonStyles';
+import { Button } from '@fluentui/react-components';
+import { SignOut24Regular } from '@fluentui/react-icons';
+
+const LoginButton = () => {
+  const styles = LoginButtonStyles();
+  const { loginWithRedirect, logout, isAuthenticated, user } = useAuth0();
+  const { t } = useTranslation();
+
+  if (isAuthenticated) {
+    return (
+      <div className={styles.loginButtonContainer}>
+        <div className={styles.userText}>{user?.email}</div>
+        <Button
+          appearance="primary"
+          icon={<SignOut24Regular />}
+          size="large"
+          onClick={() => logout()}
+        />
+      </div>
+    );
+  } else {
+    return (
+      <Button appearance="primary" onClick={() => loginWithRedirect()}>
+        {t('login')}
+      </Button>
+    );
+  }
+};
+
+export default LoginButton;

src/components/common/LoginButton/LoginButtonStyles.tsx

@@ -0,0 +1,14 @@
+import { makeStyles, tokens } from '@fluentui/react-components';
+
+const LoginButtonStyles = makeStyles({
+  userText: {
+    fontWeight: tokens.fontWeightMedium,
+    marginRight: tokens.spacingHorizontalL
+  },
+  loginButtonContainer: {
+    display: 'flex',
+    alignItems: 'center'
+  }
+});
+
+export default LoginButtonStyles;