feat(communication): add chat reactions emojis and images

frontend/components/CollaborationRoom.vue

@@ -1,7 +1,7 @@
 <script setup>
 const props = defineProps({ roomId: { type: String, required: true }, api: { type: Function, required: true }, base: { type: String, default: '/api/collaboration' }, embedded: { type: Boolean, default: false } })
 const emit = defineEmits(['changed', 'unauthorized'])
-const room = ref(null), messages = ref([]), members = ref([]), draft = ref(''), error = ref('')
+const room = ref(null), messages = ref([]), members = ref([]), draft = ref(''), draftImage = ref(null), error = ref('')
 const loading = ref(false), sending = ref(false), olderLoading = ref(false), hasMore = ref(false), viewport = ref(null)
 let generation = 0, timer, polling = false, pending = null
 const endpoint = (id, suffix = '') => `${props.base}/rooms/${encodeURIComponent(id)}${suffix}`
@@ -20,7 +20,7 @@ const scroll = async () => { await nextTick(); if (viewport.value) viewport.valu
 function failed(e) {
   error.value = messageError(e)
   if ([401, 403, 404, 410].includes(e?.statusCode || e?.status)) {
-    room.value = null; messages.value = []; members.value = []
+    room.value = null; messages.value = []; members.value = []; draftImage.value = null
     if ((e?.statusCode || e?.status) === 401) emit('unauthorized')
   }
 }
@@ -32,8 +32,8 @@ async function read(id, version) {
 }
 async function load() {
   const version = ++generation, id = props.roomId
-  room.value = null; messages.value = []; members.value = []; draft.value = ''; error.value = ''; pending = null
-  loading.value = true
+  room.value = null; messages.value = []; members.value = []; draft.value = ''; draftImage.value = null; error.value = ''; pending = null
+  loading.value = true; sending.value = false; olderLoading.value = false
   try {
     const [detail, result, people] = await Promise.all([props.api(endpoint(id)), props.api(endpoint(id, '/messages')), props.api(endpoint(id, '/members'))])
     if (version !== generation) return
@@ -75,18 +75,18 @@ async function older() {
   finally { olderLoading.value = false }
 }
 async function send() {
-  const text = draft.value.trim()
-  if (!text || sending.value || !room.value?.canSend) return
+  const text = draft.value.trim(), image = draftImage.value
+  if ((!text && !image) || sending.value || !room.value?.canSend) return
   const version = generation, id = props.roomId
-  if (!pending || pending.text !== text) pending = { text, clientId: crypto.randomUUID() }
+  if (!pending || pending.text !== text || pending.image !== image) pending = { text, image, clientId: crypto.randomUUID() }
   sending.value = true; error.value = ''
   try {
     const message = await props.api(endpoint(id, '/messages'), { method: 'POST', body: pending })
     if (version !== generation) return
-    merge([message]); draft.value = ''; pending = null
+    merge([message]); draft.value = ''; draftImage.value = null; pending = null
     await scroll(); await read(id, version)
   } catch (e) { if (version === generation) failed(e) }
-  finally { sending.value = false }
+  finally { if (version === generation) sending.value = false }
 }
 const time = value => new Date(value).toLocaleString('de-DE', { dateStyle: 'short', timeStyle: 'short' })
 watch(() => props.roomId, load, { immediate: true })
@@ -114,17 +114,18 @@ onBeforeUnmount(() => { ++generation; clearInterval(timer) })
       <p v-if="loading" class="text-sm text-gray-500">Nachrichten werden geladen …</p>
       <button v-if="hasMore" class="block w-full text-center text-sm text-green-700 underline" :disabled="olderLoading" @click="older">{{ olderLoading ? 'Wird geladen …' : 'Ältere Nachrichten laden' }}</button>
       <p v-if="room && !loading && !messages.length" class="py-12 text-center text-sm text-gray-500">Hier beginnt eure Unterhaltung. Du siehst Nachrichten ab deinem Beitritt.</p>
+      <ChatReactions :key="roomId" v-slot="{ reactions, react, busy }" :api="api" :endpoint="endpoint(roomId)" :messages="messages" :disabled="!room?.canSend || room?.offline" @error="error = messageError($event)">
       <div v-for="message in messages" :key="message.id" class="flex" :class="message.own ? 'justify-end' : 'justify-start'">
         <div class="max-w-[85%] rounded-xl px-4 py-2" :class="message.own ? 'bg-green-700 text-white' : 'bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100'">
           <p class="text-xs font-semibold">{{ message.own ? 'Du' : message.senderName }}</p>
-          <p class="whitespace-pre-wrap break-words text-sm">{{ message.body }}</p>
+          <ChatImage v-if="message.image" :api="api" :endpoint="endpoint(roomId)" :message="message" />
+          <p v-if="message.body" class="whitespace-pre-wrap break-words text-sm">{{ message.body }}</p>
           <p class="mt-1 text-right text-[10px] opacity-70">{{ time(message.createdAt) }}{{ message.pending ? ' · Wartet auf Zustellung' : message.failed ? ' · Zustellung fehlgeschlagen' : ' · Bestätigt' }}</p>
+          <ChatReactionBar :reactions="reactions[message.id] || []" :busy="busy" :disabled="!room?.canSend || room?.offline || !!message.pending || !!message.failed" @react="react(message.id, $event)" />
         </div>
       </div>
+      </ChatReactions>
     </div>
-    <form v-if="room" class="flex items-end gap-3 border-t border-gray-200 p-4 dark:border-gray-700" @submit.prevent="send">
-      <label class="min-w-0 flex-1"><span class="sr-only">Nachricht</span><textarea v-model="draft" rows="2" maxlength="10000" :disabled="!room.canSend" :placeholder="room.canSend ? 'Nachricht schreiben …' : 'Dieser Unterraum ist nur lesbar'" class="w-full resize-none rounded-lg border border-gray-300 p-2 text-sm dark:border-gray-600" @keydown.enter.exact.prevent="send" /></label>
-      <UButton type="submit" :loading="sending" :disabled="!room.canSend || !draft.trim()">Senden</UButton>
-    </form>
+    <ChatComposer v-if="room" :key="roomId" v-model="draft" v-model:image="draftImage" :busy="sending" :disabled="!room.canSend" :placeholder="room.canSend ? 'Nachricht schreiben …' : 'Dieser Unterraum ist nur lesbar'" @send="send" />
   </section>
 </template>