Merge pull request #65 from vector-im/disable-composer

Add support for disabling the composer until operator joins 

package.json

@@ -19,6 +19,6 @@
   "dependencies": {
     "@sentry/browser": "^7.5.0",
     "@sentry/tracing": "^7.5.0",
-    "hydrogen-view-sdk": "^0.0.14"
+    "hydrogen-view-sdk": "^0.0.15"
   }
 }

src/types/IChatterboxConfig.ts

@@ -23,6 +23,9 @@ 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, chatterbox will not let the user send any messages until the operator has joined
+    // Only applicable when invite_user is configured 
+    disable_composer_until_operator_join: boolean;
     // If set to true, the room created for DM is encrypted
     encrypt_room: boolean;
     // Configurations for header on chatterbox (containing title, avatar, minimize button)

src/ui/styles/style.css

@@ -214,3 +214,31 @@ body {
     height: 15px;
     font-size: 3px;
 }
+
+.WaitingForOperatorJoinView {
+    display: flex;
+    justify-content: center;
+}
+
+.FakeComposerContainer {
+    display: flex;
+    background: #FFFFFF;
+    border: 1px solid #E3E8F0;
+    border-radius: 8px;
+    width: 351px;
+    height: 56px;
+    box-sizing: border-box;
+    align-items: center;
+}
+
+.FakeComposerContainer .loader {
+    width: 15px;
+    height: 15px;
+    margin: 0 0 0 10px;
+    font-size: 2px;
+}
+
+.FakeComposerContainer span {
+    margin-left: 20px;
+    color: #737D8C;
+}

src/ui/views/ChatterboxView.ts

@@ -38,7 +38,7 @@ export class ChatterboxView extends TemplateView<ChatterboxViewModel> {
             ),
             t.mapView(
                 (vm) => vm.messageComposerViewModel,
-                (vm) => (vm ? new MessageComposer(vm) : null)
+                (vm) => (vm.kind === "composer" ? new MessageComposer(vm) : new WaitingForOperatorJoinView())
             ),
             t.view(new FooterView(vm.footerViewModel)),
         ]);
@@ -65,3 +65,14 @@ class RoomHeaderView extends TemplateView<ChatterboxViewModel> {
         ]);
     }
 }
+
+class WaitingForOperatorJoinView extends TemplateView {
+    render(t) {
+        return t.div({ className: "WaitingForOperatorJoinView" }, [
+            t.div({ className: "FakeComposerContainer" }, [
+                t.span("Waiting for operator to join "),
+                t.div({ className: "loader" })]
+            )]
+        );
+    }
+}

src/viewmodels/ChatterboxViewModel.ts

@@ -25,6 +25,7 @@ export class ChatterboxViewModel extends ViewModel {
         super(options);
         this._client = options.client;
         this._loginPromise = options.loginPromise;
+        this.emitOnRoomViewModelChange = this.emitOnRoomViewModelChange.bind(this);
     }
 
     async load() {
@@ -48,16 +49,31 @@ export class ChatterboxViewModel extends ViewModel {
             tileClassForEntry: createCustomTileClassForEntry(this._session.userId),
         })));
         await this._roomViewModel.load();
+        this._roomViewModel.on("change", this.emitOnRoomViewModelChange);
+        this.emitChange("roomViewModel");
+    }
+
+    private emitOnRoomViewModelChange() {
         this.emitChange("roomViewModel");
     }
 
     private async createRoomWithUserSpecifiedInConfig() {
         const userId = this._options.config["invite_user"];
+        const ownUserId = this._session.userId;
         let room = await this.findPreviouslyCreatedRoom();
         if (room) {
             // we already have a room with this user
             return room;
         }
+        const powerLevelContent = this._options.config["disable_composer_until_operator_join"] ? {
+            users: {
+                [userId]: 100,
+                [ownUserId]: 60
+            },
+            events: {
+                "m.room.message": 80,
+            }
+        } : null;    
         const roomBeingCreated = this._session.createRoom({
             type: 1, //todo: use enum from hydrogen-sdk here
             name: undefined,
@@ -67,6 +83,7 @@ export class ChatterboxViewModel extends ViewModel {
             alias: undefined,
             avatar: undefined,
             invites: [userId],
+            powerLevelContentOverride: powerLevelContent,
         });
         const roomStatusObservable = await this._session.observeRoomStatus(roomBeingCreated.id);
         await roomStatusObservable.waitFor(status => status === (RoomStatus.BeingCreated | RoomStatus.Replaced)).promise;
@@ -107,7 +124,7 @@ export class ChatterboxViewModel extends ViewModel {
         return promise;
     }
     
-    private async findPreviouslyCreatedRoom(): Promise<string | null> {
+    private async findPreviouslyCreatedRoom(): Promise<any | null> {
         const createdRoomId = await this.platform.settingsStorage.getString("created-room-id");
         const lastKnownInviteUserId = await this.platform.settingsStorage.getString("invite-user");
         const currentInviteUserId = this._options.config["invite_user"];
@@ -117,6 +134,11 @@ export class ChatterboxViewModel extends ViewModel {
         return null;
     }
 
+    dispose() {
+        super.dispose();
+        this._roomViewModel.off("change", this.emitOnRoomViewModelChange);
+    }
+
     minimize() {
         (window as any).sendMinimizeToParent();
         this.navigation.push("minimize");

yarn.lock

@@ -798,10 +798,10 @@ human-signals@^1.1.1:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
   integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
 
-hydrogen-view-sdk@^0.0.14:
-  version "0.0.14"
-  resolved "https://registry.yarnpkg.com/hydrogen-view-sdk/-/hydrogen-view-sdk-0.0.14.tgz#36dc876989ed57b98bf9999bf993f121f24a72b4"
-  integrity sha512-jZWXab9fVKus9mze/NRvcmZlA1u/oVvsfqgg5fcaVVk2OuIaZwCtnTkHOBp4fRvjVhKIfikN03szqZZZMaK2YA==
+hydrogen-view-sdk@^0.0.15:
+  version "0.0.15"
+  resolved "https://registry.yarnpkg.com/hydrogen-view-sdk/-/hydrogen-view-sdk-0.0.15.tgz#2c8302fc6e3ad6147efe66e6ceba3a93f8cdd14e"
+  integrity sha512-qmXiw3EeQ6J/9IYfh/nc/fsFUa+TRx81+dk5E7p4QkDDWjWWvw60rdpObxD2iKi/DOhM9s0QvE2RyrnHxWkmdA==
   dependencies:
     "@matrix-org/olm" "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz"
     another-json "^0.2.0"