Basic room upgrade prompt

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);