Adding prefix showing who sent the last message

frontend/src/pages/user/messages/Home.vue

@@ -3,15 +3,9 @@
     <div class="message-hub-conainter">
       <template v-if="!receiver_id">
         <div v-if="conversations && conversations.length > 0" class="conversation-list-container">
-          <div
+          <div v-for="(conversation, index) in conversations" :key="index" class="conversation-container" :class="{
-            v-for="(conversation, index) in conversations"
-            :key="index"
-            class="conversation-container"
-            :class="{
             selected: selConversation?.id === conversation?.id
-            }"
+          }" @click="selectConversation(conversation)">
-            @click="selectConversation(conversation)"
-          >
             <img class="participant-portrait" alt="user portrait" src="@/assets/profile.png" />
             <div class="conversation-summary-container">
               <div class="conversation-summary-header-container">
@@ -23,39 +17,27 @@
                 }}</span>
               </div>
               <div class="conversation-summary-highlight-container">
-                {{ conversation.last_message?.message_body }}
+                {{ getSenderName(conversation.last_message) }} {{ conversation.last_message?.message_body }}
               </div>
             </div>
           </div>
         </div>
-        <div
+        <div v-if="!conversations || conversations.length == 0" class="conversation-list-empty-container">
-          v-if="!conversations || conversations.length == 0"
-          class="conversation-list-empty-container"
-        >
           {{ $t('Empty conversation') }}
         </div>
       </template>
       <div class="message-panel-container">
         <div v-if="messages && messages.length > 0" class="message-thread-container">
-          <div
+          <div v-for="(item, index) in messages" :key="index" class="message-item-container"
-            v-for="(item, index) in messages"
+            :class="item.sender_id == userIdentityNote ? 'me' : ''">
-            :key="index"
-            class="message-item-container"
-            :class="item.sender_id == userIdentityNote ? 'me' : ''"
-          >
             <div class="message-item-header-container">
-              <img
+              <img class="message-item-sender-portrait" alt="user portrait" src="@/assets/profile.png" />
-                class="message-item-sender-portrait"
-                alt="user portrait"
-                src="@/assets/profile.png"
-              />
               <span class="message-item-sender-fullname">
                 {{ item.sender_firstname }}
                 {{ item.sender_lastname }}
               </span>
               <span class="message-item-create-time">
-                {{ getDateFromFulltimeString(item.create_time) }}</span
+                {{ getDateFromFulltimeString(item.create_time) }}</span>
-              >
             </div>
             <div class="message-item-message-body">{{ item.message_body }}</div>
           </div>
@@ -65,12 +47,8 @@
         </div>
         <div class="message-writing-panel-container">
           <svg-icon icon="msg-enter" class-name="writing-message-enter" />
-          <input
+          <input class="writing-message-input" type="text" v-model="writtenMessage"
-            class="writing-message-input"
+            @keypress.enter="sendMessage(selConversation?.id)" />
-            type="text"
-            v-model="writtenMessage"
-            @keypress.enter="sendMessage(selConversation?.id)"
-          />
         </div>
       </div>
     </div>
@@ -187,6 +165,15 @@ export default {
     getDateFromFulltimeString(fulltime) {
       // FromJsonToHMDateString
       return DateUtils.FromJsonToDatetimeString(fulltime)
+    },
+    // TODO: Further improve, naive version of showing who sent last message
+    getSenderName(message) {
+      if (message != null) {
+        if (message.sender_id == this.mnx_getUserIdentity()) {
+          return "You:"
+        }
+      }
+      return ''
     }
   }
 }