Started to design the general chat-page

src/components/MessageComponent.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+  const props =  defineProps({
+    ownMessage: Boolean,
+    timestamp: String,
+    message: String,
+  })
+</script>
+
+<template>
+  <div class="message" :class="{'sent' : props.ownMessage, 'received' : !props.ownMessage}">
+    <p style="margin-bottom: 0;">{{props.message}}</p>
+    <div style="text-align: right;">
+      <small style="margin-top: 0;">{{props.timestamp}}</small>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+  .message {
+    border-radius: 10px;
+    max-width: 15rem;
+    padding: 5px;
+  }
+
+  .sent {
+    background: blue;
+    margin-left: auto;
+    margin-right: 0;
+  }
+
+  .received {
+    background: red;
+  }
+</style>