KI-AGENT: Matrix-Chat in FEDEO einbetten

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>