opensource/AstrBot
3
0
Fork 0
mirror of https://github.com/AstrBotDevs/AstrBot.git synced 2026-10-16 15:06:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: restore playback and downloads for sent WebChat media (#10483)

Browse Source 
* fix(webchat): restore playback and downloads for sent media

* fix(webchat): wrap sent media attachments to prevent clipping
This commit is contained in:
Wei Chengqian
2026-10-11 11:50:38 +08:00
committed by GitHub
parent a457e59923
commit c31c1dae36
1 changed files with 49 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/src/components/chat/ChatMessageList.vue
+49 -3
View File
@@ -24,7 +24,12 @@
<div
v-if="isUserMessage(msg) && userAttachmentParts(msg).length"
class="sent-attachments"
:class="{ 'images-only': hasImageOnlyAttachments(msg) }"
:class="{
'images-only': hasImageOnlyAttachments(msg),
'has-media': userAttachmentParts(msg).some(
(part) => part.type === 'record' || part.type === 'video',
),
}"
>
<template
v-for="(part, attachmentIndex) in userAttachmentParts(msg)"
@@ -39,7 +44,13 @@
<img :src="partUrl(part)" :alt="part.filename || 'image'" />
</button>
<div v-else class="sent-attachment-card sent-file-card">
<div
v-else
class="sent-attachment-card sent-file-card"
:class="{
'sent-media-card': part.type === 'record' || part.type === 'video',
}"
>
<div
class="sent-attachment-icon"
:style="{
@@ -59,10 +70,10 @@
{{ attachmentName(part) }}
</span>
<v-btn
v-if="part.type === 'file'"
icon="mdi-download"
size="x-small"
variant="text"
:aria-label="tm('workspaceFiles.download')"
:loading="
downloadingFiles.has(
part.attachment_id ||
@@ -73,6 +84,20 @@
"
@click="downloadPart(part)"
/>
<audio
v-if="part.type === 'record'"
class="audio-part"
controls
preload="metadata"
:src="partUrl(part)"
/>
<video
v-else-if="part.type === 'video'"
class="video-part"
controls
preload="metadata"
:src="partUrl(part)"
/>
</div>
</template>
</div>
@@ -963,6 +988,11 @@ function formatDuration(seconds: number) {
scrollbar-width: thin;
}
.sent-attachments.has-media {
flex-wrap: wrap;
justify-content: flex-end;
}
.sent-attachment-card {
--attachment-color: #607d8b;
position: relative;
@@ -1029,6 +1059,22 @@ function formatDuration(seconds: number) {
color: var(--attachment-color);
}
.sent-file-card.sent-media-card {
display: grid;
align-self: flex-start;
grid-template-columns: auto minmax(0, 1fr) auto;
width: 320px;
max-width: 100%;
height: auto;
}
.sent-media-card .audio-part,
.sent-media-card .video-part {
grid-column: 1 / -1;
width: 100%;
margin-top: 0;
}
.sent-attachment-icon-symbol {
color: var(--attachment-color);
}