KI-AGENT: Matrix-Einbettung stabilisieren

frontend/pages/communication/chat.vue

@@ -14,6 +14,8 @@ const matrixMessagesViewport = ref(null)
 const roomCreateOpen = ref(false)
 const matrixCallOpen = ref(false)
 const matrixCallMode = ref("video")
+const matrixCallLoading = ref(false)
+const matrixCallUrl = ref("")
 const roomCreateForm = ref({
   name: "",
   key: "",
@@ -73,6 +75,10 @@ const matrixCallTitle = computed(() =>
   matrixCallMode.value === "audio" ? "Audioanruf" : "Videokonferenz"
 )
 
+const activeMatrixCallUrl = computed(() =>
+  matrixCallUrl.value || activeRoomElementUrl.value
+)
+
 const roomCreateKeyPreview = computed(() =>
   normalizeRoomKey(roomCreateForm.value.key || roomCreateForm.value.name)
 )
@@ -340,7 +346,18 @@ const syncRoomMembers = async () => {
   }
 }
 
-const openMatrixCall = (mode = "video") => {
+const buildElementRoomSessionUrl = (session) => {
+  const roomAddress = session.roomId || session.alias || activeRoomMatrixAddress.value
+  if (!matrixElementUrl.value || !roomAddress) return ""
+
+  const params = new URLSearchParams({
+    loginToken: session.loginToken
+  })
+
+  return `${matrixElementUrl.value}/?${params.toString()}#/room/${encodeURIComponent(roomAddress)}`
+}
+
+const openMatrixCall = async (mode = "video") => {
   if (!canStartMatrixCall.value) {
     toast.add({
       title: "Besprechung kann noch nicht gestartet werden",
@@ -350,7 +367,24 @@ const openMatrixCall = (mode = "video") => {
   }
 
   matrixCallMode.value = mode
+  matrixCallLoading.value = true
   matrixCallOpen.value = true
+
+  try {
+    const session = await $api(`${activeRoomEndpoint.value}/session`, {
+      method: "POST"
+    })
+    matrixCallUrl.value = buildElementRoomSessionUrl(session) || activeRoomElementUrl.value
+  } catch (error) {
+    matrixCallUrl.value = activeRoomElementUrl.value
+    toast.add({
+      title: "Matrix-Anmeldung konnte nicht vorbereitet werden",
+      description: "Der Raum wird ohne automatische Anmeldung geöffnet.",
+      color: "warning"
+    })
+  } finally {
+    matrixCallLoading.value = false
+  }
 }
 
 const loadRoomChat = async ({ silent = false, includeMembers = false } = {}) => {
@@ -619,6 +653,7 @@ onBeforeUnmount(stopMatrixAutoRefresh)
               color="neutral"
               variant="outline"
               aria-label="Audioanruf starten"
+              :loading="matrixCallLoading && matrixCallMode === 'audio'"
               :disabled="!canStartMatrixCall"
               @click="openMatrixCall('audio')"
           />
@@ -627,6 +662,7 @@ onBeforeUnmount(stopMatrixAutoRefresh)
               color="primary"
               variant="soft"
               aria-label="Videokonferenz starten"
+              :loading="matrixCallLoading && matrixCallMode === 'video'"
               :disabled="!canStartMatrixCall"
               @click="openMatrixCall('video')"
           />
@@ -893,6 +929,7 @@ onBeforeUnmount(stopMatrixAutoRefresh)
                 color="neutral"
                 variant="outline"
                 block
+                :loading="matrixCallLoading && matrixCallMode === 'audio'"
                 :disabled="!canStartMatrixCall"
                 @click="openMatrixCall('audio')"
             >
@@ -903,6 +940,7 @@ onBeforeUnmount(stopMatrixAutoRefresh)
                 color="primary"
                 variant="soft"
                 block
+                :loading="matrixCallLoading && matrixCallMode === 'video'"
                 :disabled="!canStartMatrixCall"
                 @click="openMatrixCall('video')"
             >
@@ -940,8 +978,8 @@ onBeforeUnmount(stopMatrixAutoRefresh)
             </div>
             <div class="flex items-center gap-2">
               <UButton
-                  v-if="activeRoomElementUrl"
-                  :to="activeRoomElementUrl"
+                  v-if="activeMatrixCallUrl"
+                  :to="activeMatrixCallUrl"
                   target="_blank"
                   icon="i-heroicons-arrow-top-right-on-square"
                   color="neutral"
@@ -959,10 +997,16 @@ onBeforeUnmount(stopMatrixAutoRefresh)
           </header>
 
           <div class="min-h-0 flex-1 bg-muted">
+            <div
+                v-if="matrixCallLoading"
+                class="flex h-full items-center justify-center text-sm text-muted"
+            >
+              Matrix wird geladen...
+            </div>
             <iframe
-                v-if="canStartMatrixCall"
+                v-else-if="canStartMatrixCall"
                 :key="`${activeRoomKey}-${matrixCallMode}`"
-                :src="activeRoomElementUrl"
+                :src="activeMatrixCallUrl"
                 class="h-full w-full border-0"
                 allow="camera; microphone; display-capture; clipboard-read; clipboard-write; fullscreen; autoplay"
                 referrerpolicy="no-referrer"