wip

src/components/Messages/MessageInput.vue

@@ -6,23 +6,23 @@ import { useChatsStore } from '@/stores/chats.ts'
 const socketsStore = useSocketsStore()
 const chatsStore = useChatsStore()
 
-const text = ref('')
+const message = ref('')
 
 const sendMessage = () => {
-  if (text.value.trim()) {
+  if (message.value && chatsStore.selectedChat) {
     socketsStore.send({
       type: SocketDataReq.CREATE_MESSAGE,
       data: {
-        chat_id: chatsStore.selected,
-        text: text.value,
+        chatId: chatsStore.selectedChat.id,
+        message: message.value.trim().slice(0, 200),
       },
     })
   }
-  text.value = ''
+  message.value = ''
 }
 
 const isEmptyText = computed(() => {
-  return !text.value
+  return !message.value
 })
 </script>
 
@@ -32,7 +32,7 @@ const isEmptyText = computed(() => {
       prepend-inner-icon="mdi-emoticon-outline"
       append-inner-icon="mdi-paperclip"
       bg-color="white"
-      v-model="text"
+      v-model="message"
       placeholder="message"
       density="default"
       @keyup.enter="sendMessage"

src/components/Messages/MessageItem.vue

@@ -1,23 +1,27 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-const props = withDefaults(
-  defineProps<{ createdAt?: string; username?: string; onRightSide?: boolean; message?: string }>(),
-  {
-    my: false,
-    message: 'foobar',
-    username: 'robot',
-  },
-)
+interface Props {
+  createdAt?: string
+  username?: string
+  onRightSide?: boolean
+  message?: string
+}
 
-const createdAt = computed(() => {
-  return props.createdAt
-    ? new Date(props.createdAt).toLocaleTimeString('ru-RU', { timeStyle: 'short' })
+const { message, username, createdAt } = withDefaults(defineProps<Props>(), {
+  my: false,
+  message: 'foobar',
+  username: 'robot',
+})
+
+const messageDate = computed(() => {
+  return createdAt
+    ? new Date(createdAt).toLocaleTimeString('ru-RU', { timeStyle: 'short' })
     : new Date().toLocaleTimeString('ru-RU', { timeStyle: 'short' })
 })
 
 const avatarLetter = computed(() => {
-  return props.username.slice(0, 1).toUpperCase()
+  return username.slice(0, 1).toUpperCase()
 })
 </script>
 
@@ -35,15 +39,15 @@ const avatarLetter = computed(() => {
   <!--    </div>-->
   <!--  </div>-->
 
-  <div class="flex gap-2" :class="{ 'flex-row-reverse': props.onRightSide }">
+  <div class="flex gap-2" :class="{ 'flex-row-reverse': onRightSide }">
     <!--    <v-avatar size="36" color="deep-purple-lighten-4">-->
     <!--      <span class="text-deep-purple-darken-2">{{ avatarLetter }}</span>-->
     <!--    </v-avatar>-->
 
     <!--    :class="props.my ? 'message-shaped-right' : 'message-shaped'"-->
-    <div class="pa-4" :class="props.onRightSide ? 'bg-blue-400' : 'bg-white'">
-      <span class="">{{ props.message }}</span>
-      <span class="">{{ createdAt }}</span>
+    <div class="flex gap-1 pa-4" :class="onRightSide ? 'bg-blue-400' : 'bg-white'">
+      <span class="">{{ message }}</span>
+      <span class="text-xs self-end">{{ messageDate }}</span>
     </div>
   </div>
 </template>

src/components/Messages/MessageToolbar.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 interface Props {
-  name: string
+  name?: string
   image?: string
 }
 
@@ -9,7 +9,7 @@ const { name, image } = defineProps<Props>()
 
 <template>
   <VToolbar theme="dark" class="px-2">
-    <VAvatar text="A" color="primary" />
+    <VAvatar :text="name?.slice(0, 1).toUpperCase()" color="primary" />
     <VToolbarTitle :text="name" />
   </VToolbar>
 </template>

src/components/Messages/MessagesWrapper.vue

@@ -3,8 +3,10 @@ import { computed, nextTick, ref, useTemplateRef, watch } from 'vue'
 import { useScroll } from '@vueuse/core'
 import type { User } from '@/stores/users.ts'
 import { useChatsStore } from '@/stores/chats.ts'
+import { useMessagesStore } from '@/stores/messages.ts'
 
 const chatsStore = useChatsStore()
+const messagesStore = useMessagesStore()
 
 // const area = useTemplateRef('messageArea')
 // const { y, arrivedState } = useScroll(area)
@@ -16,16 +18,23 @@ const chatsStore = useChatsStore()
 //   if (area.value) y.value = area.value?.scrollHeight
 // }
 
+const chatInfo = computed(() => {
+  if (chatsStore.selectedChat) {
+    return chatsStore.getChatInfo(chatsStore.selectedChat)
+  }
+  return null
+})
+
 const messages = ref([])
 </script>
 
 <template>
   <div class="flex h-full flex-col overflow-hidden">
     <div class="grow-0" v-if="chatsStore.selectedChat">
-      <slot name="toolbar" :toolBarData="chatsStore.getChatInfo(chatsStore.selectedChat)" />
+      <slot name="toolbar" :info="chatInfo" />
     </div>
     <div class="px-8 gap-2 grow flex flex-col-reverse overflow-y-auto" ref="messageArea">
-      <slot :messages="messages" />
+      <slot :messages="messagesStore.messages" />
     </div>
     <div class="grow-0">
       <slot name="input" />