вложения, канальчики, бим-бим + бам-бам

client/app/pages/index.vue

@@ -10,25 +10,35 @@
         :key="message.id"
         class="w-fit max-w-[60%]"
         :class="{
-          'ml-auto': message.sender === me?.username,
+          'ml-auto': message.senderId === me?.userId,
         }"
       >
         <p
-          v-if="message.sender !== me?.username"
+          v-if="message.senderId !== me?.userId"
           class="text-sm text-muted-color mb-1"
         >
-          {{ message.sender }}
+          {{ message.senderId }}
         </p>
 
         <div
           class="px-3 py-2 rounded-lg"
           :class="{
-            'bg-surface-800': message.sender !== me?.username,
-            'bg-surface-700': message.sender === me?.username,
+            'bg-surface-800 rounded-tl': message.senderId !== me?.userId,
+            'bg-surface-700 rounded-tr': message.senderId === me?.userId,
           }"
         >
           <p class="[&>a]:break-all" @click="handleMessageClick" v-html="parseMessageText(message.text)" />
 
+          <div v-if="message.attachments.length > 0" class="flex flex-col gap-2 mt-2">
+            <img
+              v-for="attachmentId in message.attachments"
+              :key="attachmentId"
+              class="rounded-xl max-w-60"
+              :src="`http://localhost:4000/chad/attachment/${attachmentId}`"
+              :alt="attachmentId"
+            >
+          </div>
+
           <p class="mt-1 text-right text-sm text-muted-color" :title="formatDate(message.createdAt, 'dd.MM.yyyy, HH:mm')">
             {{ formatDate(message.createdAt) }}
           </p>