Hydrogen/SolarAgent
Archived
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

✨ Chat replying

Browse Source
This commit is contained in:
LittleSheep
2024-03-31 23:31:30 +08:00
parent 276c4f5dfe
commit 169b5c0209
5 changed files with 90 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/components/chat/ChatMessage.vue
View File

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