Basic room upgrade prompt

src/components/messages/composition/RoomUpgradePrompt.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="statusEvent">
+    {{ upgrading ? $t("room.upgrading") : $t("room.needs_upgrade") }}
+    <v-btn :loading="upgrading" v-on:click="upgradeRoom">{{ $t("menu.upgrade") }}</v-btn>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { inject, Ref, ref } from 'vue';
+
+
+type RoomUpgradePromptProps = {
+  version: string;
+  urgent: boolean;
+  roomId: string;
+};
+
+const props = defineProps<RoomUpgradePromptProps>();
+const $matrix: any = inject('globalMatrix');
+
+const upgrading: Ref<boolean> = ref(false);
+
+const upgradeRoom = () => {
+  upgrading.value = true;
+  $matrix.matrixClient.upgradeRoom(props.roomId, props.version).then((r: {replacement_room: string}) => {
+    upgrading.value = false;
+  })
+};
+
+if (props.urgent) {
+  upgradeRoom();
+}
+
+</script>
+
+<style lang="scss">
+@use "@/assets/css/chat.scss" as *;
+</style>