KI-AGENT: Nativen Matrix-Chat in FEDEO starten
This commit is contained in:
@@ -10,10 +10,14 @@ const generalRoom = ref(null)
|
||||
const provisionResult = ref(null)
|
||||
const tenantSpaceProvisionResult = ref(null)
|
||||
const generalRoomProvisionResult = ref(null)
|
||||
const matrixMessages = ref([])
|
||||
const matrixMessageDraft = ref("")
|
||||
const loading = ref(false)
|
||||
const provisioning = ref(false)
|
||||
const tenantSpaceProvisioning = ref(false)
|
||||
const generalRoomProvisioning = ref(false)
|
||||
const matrixMessagesLoading = ref(false)
|
||||
const matrixMessageSending = ref(false)
|
||||
const lastUpdated = ref(null)
|
||||
|
||||
const statusItems = computed(() => [
|
||||
@@ -83,6 +87,10 @@ const loadMatrixInfo = async () => {
|
||||
tenantSpace.value = tenantSpaceRes
|
||||
generalRoom.value = generalRoomRes
|
||||
lastUpdated.value = new Date()
|
||||
|
||||
if (generalRoomRes?.exists) {
|
||||
await loadGeneralMessages()
|
||||
}
|
||||
} catch (error) {
|
||||
toast.add({
|
||||
title: "Matrix-Status konnte nicht geladen werden",
|
||||
@@ -180,6 +188,8 @@ const provisionGeneralRoom = async () => {
|
||||
title: res.alreadyExisted ? "Allgemeiner Chat ist bereits vorhanden" : "Allgemeiner Chat erstellt",
|
||||
color: "success"
|
||||
})
|
||||
|
||||
await loadGeneralMessages()
|
||||
} catch (error) {
|
||||
toast.add({
|
||||
title: "Allgemeiner Chat konnte nicht erstellt werden",
|
||||
@@ -190,6 +200,53 @@ const provisionGeneralRoom = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
const loadGeneralMessages = async () => {
|
||||
matrixMessagesLoading.value = true
|
||||
try {
|
||||
const res = await $api("/api/communication/matrix/rooms/general/messages")
|
||||
matrixMessages.value = res.messages || []
|
||||
generalRoom.value = {
|
||||
...generalRoom.value,
|
||||
alias: res.alias || generalRoom.value?.alias,
|
||||
exists: true,
|
||||
roomId: res.roomId || generalRoom.value?.roomId
|
||||
}
|
||||
} catch (error) {
|
||||
toast.add({
|
||||
title: "Matrix-Nachrichten konnten nicht geladen werden",
|
||||
color: "error"
|
||||
})
|
||||
} finally {
|
||||
matrixMessagesLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const sendMatrixMessage = async () => {
|
||||
const text = matrixMessageDraft.value.trim()
|
||||
if (!text) return
|
||||
|
||||
matrixMessageSending.value = true
|
||||
try {
|
||||
const message = await $api("/api/communication/matrix/rooms/general/messages", {
|
||||
method: "POST",
|
||||
body: { text }
|
||||
})
|
||||
|
||||
matrixMessages.value = [
|
||||
...matrixMessages.value,
|
||||
message
|
||||
]
|
||||
matrixMessageDraft.value = ""
|
||||
} catch (error) {
|
||||
toast.add({
|
||||
title: "Matrix-Nachricht konnte nicht gesendet werden",
|
||||
color: "error"
|
||||
})
|
||||
} finally {
|
||||
matrixMessageSending.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const formatDateTime = (value) => {
|
||||
if (!value) return "-"
|
||||
|
||||
@@ -199,6 +256,15 @@ const formatDateTime = (value) => {
|
||||
}).format(value)
|
||||
}
|
||||
|
||||
const formatMessageTime = (timestamp) => {
|
||||
if (!timestamp) return ""
|
||||
|
||||
return new Intl.DateTimeFormat("de-DE", {
|
||||
dateStyle: "short",
|
||||
timeStyle: "short"
|
||||
}).format(new Date(timestamp))
|
||||
}
|
||||
|
||||
onMounted(loadMatrixInfo)
|
||||
</script>
|
||||
|
||||
@@ -504,31 +570,86 @@ onMounted(loadMatrixInfo)
|
||||
Matrix-Kommunikation
|
||||
</h2>
|
||||
<p class="mt-1 truncate text-xs text-muted">
|
||||
{{ activeMatrixTarget?.name || activeMatrixTarget?.alias || "Element Web" }}
|
||||
{{ generalRoom?.name || generalRoom?.alias || "Allgemeiner Chat" }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<UButton
|
||||
icon="i-heroicons-arrow-top-right-on-square"
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
:to="embeddedElementUrl"
|
||||
target="_blank"
|
||||
>
|
||||
Separat öffnen
|
||||
</UButton>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<UButton
|
||||
icon="i-heroicons-arrow-path"
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
:loading="matrixMessagesLoading"
|
||||
:disabled="!status?.reachable || !status?.provisioningConfigured"
|
||||
@click="loadGeneralMessages"
|
||||
>
|
||||
Nachrichten laden
|
||||
</UButton>
|
||||
<UButton
|
||||
icon="i-heroicons-arrow-top-right-on-square"
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
:to="embeddedElementUrl"
|
||||
target="_blank"
|
||||
>
|
||||
Element öffnen
|
||||
</UButton>
|
||||
</div>
|
||||
</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 class="flex h-[640px] min-h-[520px] flex-col bg-muted">
|
||||
<div class="flex-1 space-y-3 overflow-y-auto p-4 sm:p-5">
|
||||
<div
|
||||
v-if="!matrixMessages.length && !matrixMessagesLoading"
|
||||
class="flex h-full min-h-64 items-center justify-center text-sm text-muted"
|
||||
>
|
||||
Noch keine Nachrichten im allgemeinen Chat.
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-for="message in matrixMessages"
|
||||
:key="message.id"
|
||||
class="flex"
|
||||
:class="message.own ? 'justify-end' : 'justify-start'"
|
||||
>
|
||||
<div
|
||||
class="max-w-[78%] rounded-lg px-3 py-2 shadow-sm"
|
||||
:class="message.own ? 'bg-primary text-inverted' : 'bg-default text-highlighted'"
|
||||
>
|
||||
<div class="mb-1 flex items-center gap-2 text-[11px] opacity-75">
|
||||
<span class="truncate font-medium">
|
||||
{{ message.own ? "Du" : message.sender }}
|
||||
</span>
|
||||
<span>{{ formatMessageTime(message.timestamp) }}</span>
|
||||
</div>
|
||||
<p class="whitespace-pre-wrap break-words text-sm">
|
||||
{{ message.body }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form
|
||||
class="flex gap-2 border-t border-default bg-default p-3"
|
||||
@submit.prevent="sendMatrixMessage"
|
||||
>
|
||||
<UInput
|
||||
v-model="matrixMessageDraft"
|
||||
class="min-w-0 flex-1"
|
||||
placeholder="Nachricht schreiben"
|
||||
:disabled="matrixMessageSending || !status?.reachable || !status?.provisioningConfigured"
|
||||
/>
|
||||
<UButton
|
||||
type="submit"
|
||||
icon="i-heroicons-paper-airplane"
|
||||
:loading="matrixMessageSending"
|
||||
:disabled="!matrixMessageDraft.trim() || !status?.reachable || !status?.provisioningConfigured"
|
||||
>
|
||||
Senden
|
||||
</UButton>
|
||||
</form>
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user