28 lines
1.3 KiB
Vue
28 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import * as schema from '~~/drizzle/schema';
|
|
|
|
defineProps<{
|
|
message: Readonly<typeof schema.messages.$inferSelect & { attachments: (typeof schema.attachments.$inferSelect & { file: typeof schema.files.$inferSelect })[] }>;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col items-end gap-1 max-w-full">
|
|
<time class="text-[10px] text-[var(--text-secondary)] opacity-60 select-none pr-1">
|
|
{{ new Date(message.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) }}
|
|
</time>
|
|
<div class="flex flex-col gap-2 max-w-full bg-[var(--bg-container)] py-2 px-3 rounded-xl">
|
|
<MarkdownRenderer v-if="message.content" :finished="true" :content="message.content" :id="message.id" />
|
|
<div v-if="message.attachments && message.attachments.length > 0" class="flex flex-col gap-2">
|
|
<div v-for="attachment in message.attachments" :key="attachment.id"
|
|
class="flex flex-wrap items-center gap-2">
|
|
<div
|
|
class="flex-shrink-0 rounded-lg overflow-hidden bg-[var(--bg-surface)] flex items-center justify-center">
|
|
<AttachmentDisplay :file="attachment.file" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|