Support E2EE

public/config.json

@@ -3,9 +3,9 @@
     "auto_join_room": "!XOUozZcpOvneVFsrGi:matrix.midhun.dev",
     "username_prefix": "foobar",
     "header": {
-        "title": "Chatterbox Test Room",
         "avatar": "https://i.imgur.com/KkSYCKB.png"
     },
     "token": "k9SL1R~GcdbjiFjC",
-    "invite_user": "@botuser:matrix.midhun.dev"
+    "invite_user": "@botuser:matrix.midhun.dev",
+    "encrypt_room": true 
 }

src/types/IChatterboxConfig.ts

@@ -7,6 +7,8 @@ export interface IChatterboxConfig {
     // If specified, chatterbox will create a dm with this user
     // This option takes precedence over 'auto_join_room'
     invite_user: string;
+    // If set to true, the room created for DM is encrypted
+    encrypt_room: boolean;
     // Configurations for header on chatterbox (containing title, avatar, minimize button)
     header: IHeader;
     // Token needed for token-authenticated registration

src/viewmodels/ChatterboxViewModel.ts

@@ -46,7 +46,7 @@ export class ChatterboxViewModel extends ViewModel {
             type: 1, //todo: use enum from hydrogen-sdk here
             name: undefined,
             topic: undefined,
-            isEncrypted: false,
+            isEncrypted: this._options.config["encrypt_room"] ?? false,
             isFederationDisabled: false,
             alias: undefined,
             avatar: undefined,

src/viewmodels/tiles.ts

-import { TextTile, ImageTile, VideoTile, FileTile, LocationTile, RedactedTile, tileClassForEntry } from "hydrogen-view-sdk";
+import { TextTile, ImageTile, VideoTile, FileTile, LocationTile, RedactedTile, EncryptionEnabledTile, tileClassForEntry } from "hydrogen-view-sdk";
 
+// Override all the message-tiles to show the display name as "me"
 class ChatterboxTextTile extends TextTile {
     get displayName() {
         return this.isOwn? "me" : super.displayName;
@@ -36,6 +37,13 @@ class ChatterboxRedactedTile extends RedactedTile {
     }
 }
 
+// We don't want to show the (long and random) user-id in this announcement! 
+class ChatterboxEncryptionEnabledTile extends EncryptionEnabledTile {
+    get announcement() {
+        return this.i18n`This room is end-to-end encrypted 🔒`;
+    }
+}
+
 export function createCustomTileClassForEntry(ownUserId: string) {
     return function customTileClassForEntry(entry) {
         switch (entry.eventType) {
@@ -69,6 +77,8 @@ export function createCustomTileClassForEntry(ownUserId: string) {
                 else {
                     return undefined;
                 }
+            case "m.room.encryption":
+                return ChatterboxEncryptionEnabledTile;
             default:
                 return tileClassForEntry(entry);