MessageComponent now displays the Display- and username of the sender

src/components/MessageComponent.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
-import { decodedTextSpanIntersectsWith } from 'typescript';
 
   const props =  defineProps({
     ownMessage: Boolean,
     timestamp: String,
     message: String,
+    sender: Object,
     gif: Boolean,
     link: Boolean,
     url: String,
+    showSender: Boolean,
   })
 
   const date = new Date(Number(props.timestamp));
@@ -16,6 +17,10 @@ import { decodedTextSpanIntersectsWith } from 'typescript';
 
 <template>
   <div class="message" :class="{'sent' : props.ownMessage, 'received' : !props.ownMessage}">
+    <div v-if="props.showSender" style="display: flex; justify-content: space-between;">
+      <div class="text-body">{{ props.sender!.firstName }} {{ props.sender!.lastName }}</div>
+      <div class="text-body">@{{ props.sender!.username }}</div>
+    </div>
     <p v-if="!props.gif && !props.link" style="margin-bottom: 0;">{{props.message}}</p>
     <img v-if="props.gif" :src="props.url" alt="GIF" style="width: 100%;border-radius: 10px;" />
     <a v-if="props.link" :href="props.url" target="_blank">{{props.url}}</a>