KI-AGENT: Chat Benachrichtigungen und Ungelesen-Zähler umsetzen

frontend/pages/communication/chat.vue

@@ -3,13 +3,15 @@ import { ConnectionState, Room, RoomEvent, Track } from "livekit-client"
 
 const toast = useToast()
 const { $api } = useNuxtApp()
+const route = useRoute()
 
 const status = ref(null)
 const identity = ref(null)
 const matrixRooms = ref([])
 const matrixProjectRooms = ref([])
 const matrixDirectRooms = ref([])
-const activeRoomKey = ref("allgemein")
+const unreadRooms = ref({})
+const activeRoomKey = ref(typeof route.query.room === "string" ? route.query.room : "allgemein")
 const matrixMessages = ref([])
 const matrixMembers = ref([])
 const matrixMessageDraft = ref("")
@@ -124,6 +126,8 @@ const rooms = computed(() => {
       ...room,
       group: "Räume",
       icon: "i-heroicons-chat-bubble-left-right",
+      unread: unreadRooms.value[room.key]?.count || 0,
+      mentions: unreadRooms.value[room.key]?.mentions || 0,
       description: room.alias || room.roomId || "Mandantenweiter Austausch"
     }))
 
@@ -131,6 +135,8 @@ const rooms = computed(() => {
     ...room,
     group: "Projekte",
     icon: "i-heroicons-briefcase",
+    unread: unreadRooms.value[room.key]?.count || 0,
+    mentions: unreadRooms.value[room.key]?.mentions || 0,
     description: room.projectNumber || room.topic || "Projektkommunikation",
     provisionEndpoint: `/api/communication/matrix/project-rooms/${encodeURIComponent(room.projectId)}/provision`
   }))
@@ -139,6 +145,8 @@ const rooms = computed(() => {
     ...room,
     group: "Direkt",
     icon: "i-heroicons-user-circle",
+    unread: unreadRooms.value[room.key]?.count || 0,
+    mentions: unreadRooms.value[room.key]?.mentions || 0,
     description: room.email || room.topic || "Direktnachricht",
     provisionEndpoint: `/api/communication/matrix/direct-rooms/${encodeURIComponent(room.userId)}/provision`
   }))
@@ -285,6 +293,33 @@ const scrollMessagesToBottom = async () => {
   matrixMessagesViewport.value.scrollTop = matrixMessagesViewport.value.scrollHeight
 }
 
+const loadUnreadCounts = async () => {
+  if (!canUseMatrixChat.value) return
+
+  try {
+    const res = await $api("/api/communication/matrix/unread")
+    unreadRooms.value = res.rooms || {}
+  } catch (error) {
+    unreadRooms.value = {}
+  }
+}
+
+const markActiveRoomRead = async () => {
+  if (!canUseMatrixChat.value || !activeRoom.value?.exists) return
+
+  try {
+    await $api(`${activeRoomEndpoint.value}/read`, {
+      method: "POST"
+    })
+    unreadRooms.value = {
+      ...unreadRooms.value,
+      [activeRoomKey.value]: { count: 0, mentions: 0 }
+    }
+  } catch (error) {
+    // Lesestatus ist Komfortfunktion; Chat selbst soll dadurch nicht blockieren.
+  }
+}
+
 const loadChatInfo = async () => {
   loading.value = true
   try {
@@ -302,6 +337,7 @@ const loadChatInfo = async () => {
     matrixProjectRooms.value = projectRoomsRes.rooms || []
     matrixDirectRooms.value = directRoomsRes.rooms || []
     lastUpdated.value = new Date()
+    await loadUnreadCounts()
 
     if (activeRoom.value?.exists && canUseMatrixChat.value) {
       await loadRoomChat({ silent: true, includeMembers: true })
@@ -403,6 +439,7 @@ const loadRoomMessages = async ({ silent = false } = {}) => {
   try {
     const res = await $api(`${activeRoomEndpoint.value}/messages`)
     mergeMatrixMessages(res.messages || [])
+    await markActiveRoomRead()
     matrixRooms.value = matrixRooms.value.map((room) => room.key === activeRoomKey.value ? {
       ...room,
       alias: res.alias || room.alias,
@@ -826,6 +863,7 @@ const startMatrixAutoRefresh = () => {
   matrixRefreshInterval = window.setInterval(() => {
     if (!document.hidden && canUseMatrixChat.value && activeRoom.value?.exists) {
       loadRoomChat({ silent: true })
+      loadUnreadCounts()
     }
   }, 15000)
 }
@@ -1010,6 +1048,14 @@ onBeforeUnmount(() => {
               >
                 lädt
               </UBadge>
+              <UBadge
+                  v-else-if="room.unread"
+                  :color="room.mentions ? 'error' : 'primary'"
+                  variant="solid"
+                  size="xs"
+              >
+                {{ room.mentions ? `@${room.mentions}` : room.unread }}
+              </UBadge>
               <UBadge
                   v-else-if="room.exists"
                   color="success"
@@ -1105,7 +1151,16 @@ onBeforeUnmount(() => {
               :disabled="room.disabled"
               @click="setActiveRoom(room)"
           >
-            {{ room.name }}
+            <span>{{ room.name }}</span>
+            <UBadge
+                v-if="room.unread"
+                class="ml-2"
+                :color="room.mentions ? 'error' : 'primary'"
+                variant="solid"
+                size="xs"
+            >
+              {{ room.mentions ? `@${room.mentions}` : room.unread }}
+            </UBadge>
           </button>
         </div>