| 1 | <template> |
| 2 | <div class="group flex flex-col gap-0.5" :class="{ 'items-end text-right': msg.sender === 'user' }"> |
| 3 | <template v-if="msg.sender === 'server'"> |
| 4 | <div class="text-secondary inline-flex items-center gap-1 text-sm font-semibold"> |
| 5 | <span>Talon:</span> |
| 6 | <div |
| 7 | v-if="isCopySupported" |
| 8 | class="pointer-events-none ml-1 flex items-center opacity-0 transition-opacity duration-300 group-hover:pointer-events-auto group-hover:opacity-100" |
| 9 | > |
| 10 | <n-tooltip> |
| 11 | <template #trigger> |
| 12 | <n-button size="tiny" text @click="copyText(msg.body)"> |
| 13 | <template #icon> |
| 14 | <Icon name="carbon:copy" :size="13" /> |
| 15 | </template> |
| 16 | </n-button> |
| 17 | </template> |
| 18 | <div class="text-xs">{{ showCopyTooltip ? "Copied!" : "Copy" }}</div> |
| 19 | </n-tooltip> |
| 20 | </div> |
| 21 | </div> |
| 22 | <div class="**:text-default **:text-sm [&_*:last-child]:mb-0!"> |
| 23 | <Markdown :source="msg.body" class="overflow-hidden" /> |
| 24 | </div> |
| 25 | </template> |
| 26 | |
| 27 | <template v-if="msg.sender === 'user'"> |
| 28 | <div class="flex items-end justify-end gap-3 pl-6"> |
| 29 | <div class="bg-secondary **:text-default rounded-lg px-2 py-1 text-sm [&_*:last-child]:mb-0!"> |
| 30 | <Markdown :source="msg.body" class="overflow-hidden" /> |
| 31 | </div> |
| 32 | </div> |
| 33 | </template> |
| 34 | |
| 35 | <div class="text-tertiary mt-1 text-xs"> |
| 36 | {{ formatDate(msg.datetime, dFormats.datetime) }} |
| 37 | </div> |
| 38 | </div> |
| 39 | </template> |
| 40 | |
| 41 | <script setup lang="ts"> |
| 42 | import { useClipboard } from "@vueuse/core" |
| 43 | import { NButton, NTooltip } from "naive-ui" |
| 44 | import Icon from "@/components/common/Icon.vue" |
| 45 | import Markdown from "@/components/common/Markdown.vue" |
| 46 | import { useSettingsStore } from "@/stores/settings" |
| 47 | import { formatDate } from "@/utils/format" |
| 48 | |
| 49 | export interface TalonMessage { |
| 50 | id: string |
| 51 | datetime: Date |
| 52 | body: string |
| 53 | sender: "user" | "server" |
| 54 | } |
| 55 | |
| 56 | defineProps<{ |
| 57 | msg: TalonMessage |
| 58 | }>() |
| 59 | |
| 60 | const dFormats = useSettingsStore().dateFormat |
| 61 | const { copy: copyText, copied: showCopyTooltip, isSupported: isCopySupported } = useClipboard() |
| 62 | </script> |