✨ Chat replying

src/components/chat/ChatEditor.vue

@@ -1,5 +1,33 @@
 <template>
   <v-form class="flex-grow-1" ref="chat" @submit.prevent="sendMessage">
+    <v-expand-transition>
+      <v-alert
+        v-show="channels.related?.messages?.reply_to"
+        class="mb-3 text-sm"
+        variant="tonal"
+        density="compact"
+        type="info"
+      >
+        You are about replying a message #{{ channels.related?.messages?.reply_to?.id }}
+
+        <template #prepend>
+          <div class="h-[30px] flex items-center justify-center">
+            <v-icon icon="mdi-reply" size="small" />
+          </div>
+        </template>
+
+        <template #append>
+          <v-btn
+            icon="mdi-close"
+            size="x-small"
+            color="info"
+            variant="text"
+            @click="channels.related.messages.reply_to = null"
+          />
+        </template>
+      </v-alert>
+    </v-expand-transition>
+
     <v-expand-transition>
       <v-alert
         v-show="channels.related?.messages?.edit_to"
@@ -106,6 +134,7 @@ const dialogs = reactive({
 
 const data = ref<any>({
   content: "",
+  reply_id: null,
   attachments: []
 })
 
@@ -117,11 +146,14 @@ async function sendMessage() {
     : `/api/channels/${channels.current.alias}/messages`
   const method = channels.related.messages.edit_to ? "PUT" : "POST"
 
+  const payload = data.value
+  payload.reply_to = payload.reply_id
+
   loading.value = true
   const res = await request("messaging", url, {
     method: method,
     headers: { Authorization: `Bearer ${await getAtk()}`, "Content-Type": "application/json" },
-    body: JSON.stringify(data.value)
+    body: JSON.stringify(payload)
   })
   if (res.status !== 200) {
     error.value = await res.text()
@@ -133,6 +165,15 @@ async function sendMessage() {
   loading.value = false
 }
 
+watch(
+  () => channels.related.messages.reply_to,
+  (val) => {
+    if (val) {
+      data.value.reply_id = val.id
+    }
+  }
+)
+
 watch(
   () => channels.related.messages.edit_to,
   (val) => {
@@ -144,6 +185,7 @@ watch(
 
 function resetEditor() {
   chat.value?.reset()
+  channels.related.messages.reply_to = null
   channels.related.messages.edit_to = null
   channels.related.messages.delete_to = null
   data.value = {

src/components/chat/ChatList.vue

@@ -3,8 +3,8 @@
     class="mt-[-16px] overflow-hidden"
     :onLoad="props.loader"
   >
-    <template v-for="item in props.messages" :key="item">
+    <template v-for="item in props.messages" :key="item.id">
-      <chat-message class="px-6 py-2" :item="item" />
+      <chat-message class="px-6 py-2" :id="`m${item.id}`" :item="item" />
     </template>
 
     <template #empty>

src/components/chat/ChatMessage.vue

@@ -1,32 +1,45 @@
 <template>
-  <div class="flex gap-2 relative transition-colors transition-300 message-item">
+  <div class="relative transition-colors transition-300 message-item">
-    <div>
+    <a v-if="props.item?.reply_to" :href="`#m${props.item?.reply_to.id}`">
-      <v-avatar
+      <div class="pl-2 mb-0.5 text-sm opacity-80 flex items-center">
-        color="grey-lighten-2"
+        <v-icon icon="mdi-reply" class="me-2" />
-        icon="mdi-account-circle"
+        <span class="me-1 text-xs overflow-hidden ws-nowarp text-ellipsis">{{ props.item?.reply_to?.content }}</span>
-        class="rounded-card"
+        <span class="text-xs overflow-hidden ws-nowarp text-ellipsis">
-        :image="props.item?.sender.account.avatar"
+          from {{ props.item?.reply_to?.sender.account.name }}
-      />
+        </span>
-    </div>
+      </div>
+    </a>
 
-    <div class="flex-grow-1">
+    <div class="flex gap-2">
-      <div class="font-bold text-sm">{{ props.item?.sender.account.nick }}</div>
+      <div>
-      <div>{{ props.item?.content }}</div>
+        <v-avatar
+          color="grey-lighten-2"
+          icon="mdi-account-circle"
+          class="rounded-card"
+          :image="props.item?.sender.account.avatar"
+        />
+      </div>
 
-      <message-attachment
+      <div class="flex-grow-1">
-        v-if="props.item?.attachments && props.item?.attachments.length > 0"
+        <div class="font-bold text-sm">{{ props.item?.sender.account.nick }}</div>
-        class="mt-1"
+        <div>{{ props.item?.content }}</div>
-        :attachments="props.item?.attachments"
-      />
-    </div>
 
-    <div class="transition-opacity transition-300 message-action">
+        <message-attachment
-      <v-card>
+          v-if="props.item?.attachments && props.item?.attachments.length > 0"
-        <div class="flex px-2 py-0.5">
+          class="mt-1"
-          <v-btn icon="mdi-pencil" size="x-small" variant="text" @click="editMessage" />
+          :attachments="props.item?.attachments"
-          <v-btn icon="mdi-delete" size="x-small" variant="text" color="error" @click="deleteMessage" />
+        />
-        </div>
+      </div>
-      </v-card>
+
+      <div class="transition-opacity transition-300 message-action">
+        <v-card>
+          <div class="flex px-2 py-0.5">
+            <v-btn icon="mdi-reply" size="x-small" variant="text" @click="replyMessage" />
+            <v-btn icon="mdi-pencil" size="x-small" variant="text" color="warning" @click="editMessage" />
+            <v-btn icon="mdi-delete" size="x-small" variant="text" color="error" @click="deleteMessage" />
+          </div>
+        </v-card>
+      </div>
     </div>
   </div>
 </template>
@@ -39,6 +52,10 @@ const channels = useChannels()
 
 const props = defineProps<{ item: any }>()
 
+function replyMessage() {
+  channels.related.messages.reply_to = JSON.parse(JSON.stringify(props.item))
+}
+
 function editMessage() {
   channels.related.messages.edit_to = JSON.parse(JSON.stringify(props.item))
 }

src/components/posts/PostList.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="post-list mx-[-8px]">
     <v-infinite-scroll :items="props.posts" :onLoad="props.loader">
-      <template v-for="(item, idx) in props.posts" :key="item">
+      <template v-for="(item, idx) in props.posts" :key="item.id">
         <div class="mb-3 px-[8px]">
           <v-card>
             <template #text>

src/stores/channels.ts

@@ -26,6 +26,7 @@ export const useChannels = defineStore("channels", () => {
 
     messages: {
       edit_to: null,
+      reply_to: null,
       delete_to: null
     }
   })
@@ -90,6 +91,7 @@ export const useChannels = defineStore("channels", () => {
             messages.value = messages.value.filter((x) => {
               return x.id !== payload.id
             })
+            break
         }
       }
     })