Work on export and moving to Vue composition API

src/components/messages/composition/MessageFile.vue

@@ -0,0 +1,55 @@
+<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>