From 30b6ffcc201df5ba50e5a39401c018da46848852 Mon Sep 17 00:00:00 2001
From: florianfederspiel <florian@fedeo.de>
Date: Mon, 18 May 2026 17:29:34 +0200
Subject: [PATCH] KI-AGENT: Matrix-Chat in FEDEO einbetten

---
 .env.example                           |  1 +
 frontend/nuxt.config.ts                |  3 +-
 frontend/pages/communication/index.vue | 60 +++++++++++++++++++++++++-
 3 files changed, 62 insertions(+), 2 deletions(-)

diff --git a/.env.example b/.env.example
index f270545..0a6780f 100644
--- a/.env.example
+++ b/.env.example
@@ -33,3 +33,4 @@ MATRIX_DEV_TURN_MAX_PORT=49200
 MATRIX_HOMESERVER_URL=http://localhost:8008
 MATRIX_REGISTRATION_SHARED_SECRET=copy-from-matrix-dev-synapse-homeserver-yaml
 MATRIX_SERVICE_USER_LOCALPART=fedeo_service
+NUXT_PUBLIC_MATRIX_ELEMENT_URL=http://localhost:8080
diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
index 0b465e8..8b07625 100644
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -80,7 +80,8 @@ export default defineNuxtConfig({
 
         public: {
             apiBase: '',
-            pdfLicense: ''
+            pdfLicense: '',
+            matrixElementUrl: process.env.NUXT_PUBLIC_MATRIX_ELEMENT_URL || 'http://localhost:8080'
         }
     },
 
diff --git a/frontend/pages/communication/index.vue b/frontend/pages/communication/index.vue
index c62976d..745b048 100644
--- a/frontend/pages/communication/index.vue
+++ b/frontend/pages/communication/index.vue
@@ -1,6 +1,7 @@
 <script setup>
 const toast = useToast()
 const { $api } = useNuxtApp()
+const runtimeConfig = useRuntimeConfig()
 
 const status = ref(null)
 const identity = ref(null)
@@ -48,6 +49,25 @@ const statusItems = computed(() => [
   }
 ])
 
+const elementBaseUrl = computed(() =>
+  String(runtimeConfig.public.matrixElementUrl || "http://localhost:8080").replace(/\/+$/, "")
+)
+
+const activeMatrixTarget = computed(() => {
+  if (generalRoom.value?.exists) return generalRoom.value
+  if (tenantSpace.value?.exists) return tenantSpace.value
+  return null
+})
+
+const activeMatrixTargetId = computed(() =>
+  activeMatrixTarget.value?.roomId || activeMatrixTarget.value?.alias || ""
+)
+
+const embeddedElementUrl = computed(() => {
+  if (!activeMatrixTargetId.value) return `${elementBaseUrl.value}/`
+  return `${elementBaseUrl.value}/#/room/${encodeURIComponent(activeMatrixTargetId.value)}`
+})
+
 const loadMatrixInfo = async () => {
   loading.value = true
   try {
@@ -467,10 +487,48 @@ onMounted(loadMatrixInfo)
           </div>
           <div class="flex gap-2">
             <UIcon name="i-heroicons-chat-bubble-left-right" class="mt-0.5 size-4 shrink-0" />
-            <span>Chat-Client in FEDEO einbetten.</span>
+            <span>Nativen FEDEO-Chat schrittweise an Matrix-Sync anbinden.</span>
           </div>
         </div>
       </UCard>
     </div>
+
+    <UCard :ui="{ root: 'rounded-lg overflow-hidden', body: 'p-0 sm:p-0' }">
+      <template #header>
+        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+          <div class="flex min-w-0 items-center gap-2">
+            <UIcon name="i-heroicons-chat-bubble-left-right" class="size-5 shrink-0 text-primary" />
+            <div class="min-w-0">
+              <h2 class="text-base font-semibold text-highlighted">
+                Matrix-Kommunikation
+              </h2>
+              <p class="mt-1 truncate text-xs text-muted">
+                {{ activeMatrixTarget?.name || activeMatrixTarget?.alias || "Element Web" }}
+              </p>
+            </div>
+          </div>
+
+          <UButton
+              icon="i-heroicons-arrow-top-right-on-square"
+              color="neutral"
+              variant="outline"
+              :to="embeddedElementUrl"
+              target="_blank"
+          >
+            Separat öffnen
+          </UButton>
+        </div>
+      </template>
+
+      <div class="h-[720px] min-h-[520px] bg-muted">
+        <iframe
+            class="h-full w-full border-0"
+            :src="embeddedElementUrl"
+            title="Matrix-Kommunikation"
+            allow="camera; microphone; display-capture; clipboard-read; clipboard-write; autoplay; fullscreen"
+            sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-downloads allow-modals allow-presentation"
+        />
+      </div>
+    </UCard>
   </div>
 </template>