56 lines
1.7 KiB
Vue
56 lines
1.7 KiB
Vue
|
<template>
|
||
|
|
<component :is="rootComponent" v-bind="{ ...$props, ...$attrs }">
|
||
|
|
<div class="bubble">
|
||
|
|
{{ inOut }}
|
||
|
|
<div class="original-message" v-if="inReplyToText">
|
||
|
|
<div class="original-message-sender">{{ inReplyToSender }}</div>
|
||
|
|
<div class="original-message-text" v-html="linkify($$sanitize(inReplyToText))" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="message">
|
||
|
|
<ThumbnailView class="clickable" v-on:itemclick="onDownload" :item="attachment" />
|
||
|
|
<span class="edit-marker" v-if="event?.replacingEventId()">{{ $t("message.edited") }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</component>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { computed, inject, ref, Ref } from "vue";
|
||
|
|
import MessageIncoming from "./MessageIncoming.vue";
|
||
|
|
import MessageOutgoing from "./MessageOutgoing.vue";
|
||
|
|
import ThumbnailView from "../../file_mode/ThumbnailView.vue";
|
||
|
|
import { useI18n } from "vue-i18n";
|
||
|
|
import { MessageEmits, MessageProps, useMessage } from "./useMessage";
|
||
|
|
import { KeanuEvent } from "../../../models/eventAttachment";
|
||
|
|
|
||
|
|
const { t } = useI18n();
|
||
|
|
const $matrix: any = inject("globalMatrix");
|
||
|
|
const $$sanitize: any = inject("globalSanitize");
|
||
|
|
|
||
|
|
const inOut: Ref<"in" | "out"> = ref("in");
|
||
|
|
|
||
|
|
const emits = defineEmits<MessageEmits & { (event: "download", value: KeanuEvent | undefined): void }>();
|
||
|
|
const props = defineProps<MessageProps>();
|
||
|
|
|
||
|
|
const { event, isIncoming, attachment, inReplyToText, inReplyToSender, linkify } = useMessage(
|
||
|
|
$matrix,
|
||
|
|
t,
|
||
|
|
props,
|
||
|
|
emits,
|
||
|
|
undefined
|
||
|
|
);
|
||
|
|
|
||
|
|
const rootComponent = computed(() => {
|
||
|
|
return isIncoming.value ? MessageIncoming : MessageOutgoing;
|
||
|
|
});
|
||
|
|
|
||
|
|
const onDownload = () => {
|
||
|
|
emits("download", event.value);
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
@use "@/assets/css/chat.scss" as *;
|
||
|
|
</style>
|