Basic room upgrade prompt

src/assets/translations/en.json

@@ -50,7 +50,8 @@
     "user_revoke_moderator": "Revoke moderator",
     "pin": "Pin post",
     "unpin": "Unpin post",
-    "cancel_knock": "Cancel knock"
+    "cancel_knock": "Cancel knock",
+    "upgrade": "Upgrade"
   },
   "message": {
     "you": "You",
@@ -134,7 +135,9 @@
     "room_list_new_messages": "{count} new messages",
     "room_list_rooms": "Rooms",
     "room_name_required": "Room name is required",
-    "room_topic_required": "Room description is required"
+    "room_topic_required": "Room description is required",
+    "needs_upgrade": "This room needs to be upgraded to a new room version",
+    "upgrading": "Upgrading room version"
   },
   "room_welcome": {
     "info": "Welcome! Here are a few things to know about your room:",

src/components/Chat.vue

@@ -26,6 +26,8 @@
       <VoiceRecorder class="audio-layout" v-if="useVoiceMode" :micButtonRef="$refs.mic_button" :ptt="showRecorderPTT" :show="showRecorder"
           v-on:close="showRecorder = false" v-on:file="onVoiceRecording" :sendTypingIndicators="useVoiceMode" />
 
+    <RoomUpgradePrompt v-if="roomUpgradeInfo" :roomId="roomId" :urgent="roomUpgradeInfo.urgent" :version="roomUpgradeInfo.version" />
+
     <SendAttachmentsLayout 
       v-if="room && useFileModeNonAdmin" 
       :room="room"
@@ -318,6 +320,7 @@ import WelcomeHeaderChannelUser from "./welcome_headers/WelcomeHeaderChannelUser
 import NoHistoryRoomWelcomeHeader from "./NoHistoryRoomWelcomeHeader.vue";
 import StickerPickerBottomSheet from "./StickerPickerBottomSheet";
 import UserProfileDialog from "./UserProfileDialog.vue"
+import RoomUpgradePrompt from "./messages/composition/RoomUpgradePrompt.vue";
 import BottomSheet from "./BottomSheet.vue";
 import CreatePollDialog from "./CreatePollDialog.vue";
 import chatMixin, { ROOM_READ_MARKER_EVENT_PLACEHOLDER } from "./chatMixin";
@@ -390,6 +393,7 @@ export default {
     MessageOperationsChannel,
     RoomExport,
     EmojiPicker,
+    RoomUpgradePrompt
   },
 
   data() {
@@ -403,6 +407,7 @@ export default {
       typingMembers: [],
       timelineSet: null,
       timelineWindow: null,
+      roomUpgradeInfo: undefined,
 
       /** true if we are currently paginating */
       timelineWindowPaginating: false,
@@ -1000,6 +1005,12 @@ export default {
 
       this.reverseOrder = (this.room && this.roomDisplayType == ROOM_TYPE_CHANNEL);
       this.room["displayType"] = this.roomDisplayType;
+      this.roomUpgradeInfo = undefined;
+      if (this.room.userMayUpgradeRoom(this.$matrix.currentUserId)) {
+        this.room.getRecommendedVersion().then((info) => {
+          this.roomUpgradeInfo = info;
+        });
+      }
 
       // Listen to events
       this.$matrix.on("Room.timeline", this.onEvent);

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>