✨ Basic chat layouts

src/components/chat/ChatMessage.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="flex gap-2">
+    <div>
+      <v-avatar
+        color="grey-lighten-2"
+        icon="mdi-account-circle"
+        class="rounded-card"
+        :image="props.item?.sender.avatar"
+      />
+    </div>
+
+    <div class="flex-grow-1">
+      <div class="font-bold text-sm">{{ props.item?.sender.nick }}</div>
+      <div>{{ props.item?.content }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ item: any }>()
+</script>
+
+<style scoped>
+.rounded-card {
+  border-radius: 8px;
+}
+</style>