adamf/web_server
1
1
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

Add scroll to bottom on chat
Some checks failed
Deploy with Docker Compose / deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Adam French
2026-03-10 11:56:52 +00:00
parent 604576b46a
commit 26ea0108e0
1 changed files with 35 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
nginx/vue/src/components/util/Chat.vue
View File

@@ -67,22 +67,46 @@ onUnmounted(() => {
<p v-for="message in messages" :key="message.id">
<span class="text-tertiary">{{ message.authorId }}:</span>
{{ message.text }}
<template v-if="message.fileUrl && isSafeFileUrl(message.fileUrl)">
<img v-if="isImageUrl(message.fileUrl)" :src="message.fileUrl"
class="max-w-xs max-h-48 rounded" />
<video v-else-if="isVideoUrl(message.fileUrl)" :src="message.fileUrl"
controls class="max-w-xs max-h-48 rounded" />
<a v-else :href="message.fileUrl" target="_blank"
class="underline">{{ message.fileUrl.split('/').pop() }}</a>
<template
v-if="message.fileUrl && isSafeFileUrl(message.fileUrl)"
>
<img
v-if="isImageUrl(message.fileUrl)"
:src="message.fileUrl"
class="max-w-xs max-h-48 rounded"
/>
<video
v-else-if="isVideoUrl(message.fileUrl)"
:src="message.fileUrl"
controls
class="max-w-xs max-h-48 rounded"
/>
<a
v-else
:href="message.fileUrl"
target="_blank"
class="underline"
>{{ message.fileUrl.split("/").pop() }}</a
>
</template>
</p>
</div>
<input v-model="messageInput" @keyup.enter="sendMessage" />
<input ref="fileInput" type="file" class="hidden"
@change="onFileSelected" />
<div class="flex gap-2">
<input
ref="fileInput"
type="file"
class="hidden"
@change="onFileSelected"
/>
<div class="flex justify-between">
<Button @click="sendMessage">Send</Button>
<Button v-if="authStore.user.admin" @click="fileInput.click()">Attach</Button>
<Button v-if="authStore.user.admin" @click="fileInput.click()"
>Attach</Button
>
<div class="flex gap-2">
<Button @click="fileInput.click()">Attach</Button>
<Button @click="scrollToBottom">To Bottom</Button>
</div>
</div>
</div>
</template>