Implement unread count

src/main.ts

@@ -29,6 +29,10 @@ async function fetchConfig(): Promise<IChatterboxConfig> {
     return config;
 }
 
+function shouldStartMinimized(): boolean {
+    return !!new URLSearchParams(window.location.search).get("minimized");
+}
+
 async function main() {
     const root = document.querySelector(rootDivId) as HTMLDivElement;
     if (!root) {
@@ -40,7 +44,8 @@ async function main() {
     const navigation = new Navigation(allowsChild);
     platform.setNavigation(navigation);
     const urlRouter = createRouter({ navigation, history: platform.history });
-    const rootViewModel = new RootViewModel(config, {platform, navigation, urlCreator: urlRouter});
+    const startMinimized = shouldStartMinimized();
+    const rootViewModel = new RootViewModel(config, {platform, navigation, urlCreator: urlRouter, startMinimized});
     rootViewModel.start();
     const rootView = new RootView(rootViewModel);
     root.appendChild(rootView.mount());
@@ -67,4 +72,8 @@ function allowsChild(parent, child) {
     window.parent?.postMessage({ action: "minimize" }, "*");
 };
 
+(window as any).sendNotificationCount = function (count: number) {
+    window.parent?.postMessage({ action: "unread-message", count }, "*");
+};
+
 main();

src/observables/MessageFromParent.ts

+import { EventEmitter } from "hydrogen-view-sdk";
+
+export class MessageFromParent extends EventEmitter {
+    constructor() {
+        super();
+        window.addEventListener("message", (event) => {
+            const { action } = event.data;
+            this.emit(action, event.data);
+        });
+    }
+}

src/parent/iframe.ts

@@ -17,11 +17,13 @@ export function toggleIframe() {
     if (iframeElement.style.display !== "none") {
         iframeElement.style.display = "none";
         document.querySelector(".start-chat-btn").classList.remove("start-background-minimized");
+        iframeElement.contentWindow.postMessage({ action: "minimize" }, "*");;
         if (isMobile()) {
             startButtonDiv.style.display = "block";
         }
     }
     else {
+        iframeElement.contentWindow.postMessage({ action: "maximize" }, "*");;
         iframeElement.style.display = "block";
         document.querySelector(".start-chat-btn").classList.add("start-background-minimized");
         if (isMobile()) {

src/parent/load.ts

@@ -8,11 +8,31 @@ export function loadStartButton() {
     loadCSS();
     const container = document.createElement("div");
     container.className = "start";
+    const button = createStartButton();
+    container.appendChild(button);
+    document.body.appendChild(container);
+    if (window.localStorage.getItem("chatterbox-should-load-in-background")) {
+        /**
+         * If chatterbox made it to the timeline before, load the chatterbox app in background.
+         * This will let us watch for new messages and show a notification badge as needed.
+         */
+        loadIframe(true);
+        toggleIframe();
+    }
+}
+
+function createStartButton() {
     const button = document.createElement("button");
     button.className = "start-chat-btn";
     button.onclick = () => (window as any).isIframeLoaded? toggleIframe() : loadIframe();
-    container.appendChild(button);
-    document.body.appendChild(container);
+    button.appendChild(createNotificationBadge());
+    return button;
+}
+
+function createNotificationBadge() {
+    const notificationBadge = document.createElement("span");
+    notificationBadge.className = "notification-badge hidden";
+    return notificationBadge;
 }
 
 function loadCSS() {
@@ -22,22 +42,20 @@ function loadCSS() {
     document.head.appendChild(linkElement);
 }
 
-function loadIframe() {
+function loadIframe(minimized = false) {
     const iframe = document.createElement("iframe");
     const configLocation = (window as any).CHATTERBOX_CONFIG_LOCATION;
     if (!configLocation) {
         throw new Error("CHATTERBOX_CONFIG_LOCATION is not set");
     }
     iframe.src = new URL(
-        "../chatterbox.html?config=" + configLocation,
+        `../chatterbox.html?config=${configLocation}${minimized? "&minimized=true": ""}`,
         hostRoot
     ).href;
     iframe.className = "chatterbox-iframe";
     document.body.appendChild(iframe);
     (window as any).isIframeLoaded = true;
-    document
-        .querySelector(".start-chat-btn")
-        .classList.add("start-background-minimized");
+    document .querySelector(".start-chat-btn") .classList.add("start-background-minimized");
     if (isMobile()) {
         (document.querySelector(".start") as HTMLDivElement).style.display =
             "none";

src/parent/parent-style.css

@@ -39,3 +39,24 @@
 .start-background-minimized {
     background: no-repeat center url("../ui/res/chevron-down-button.svg"), linear-gradient(180deg, #7657F2 0%, #5C56F5 100%);
 }
+
+.notification-badge {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    color: white;
+    background-color: #FF5B55;
+    left: 47px;
+    bottom: 49px;
+    border-radius: 100%;
+    font-size: 12px;
+    font-weight: bold;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
+}
+
+.hidden {
+    display: none;
+}

src/parent/parent.ts

@@ -4,15 +4,35 @@ import "./parent-style.css";
 
 (window as any).isIframeLoaded = false;
 
+function setUnreadCount(count) {
+    const notification = document.querySelector(".notification-badge") as HTMLSpanElement;
+    if (count === 0) {
+        notification.classList.add("hidden");
+    }
+    else {
+        notification.innerText = count;
+        notification.classList.remove("hidden");
+    }
+}
+
 window.addEventListener("message", event => {
     const { action } = event.data;
     switch (action) {
         case "resize-iframe":
+            if (event.data.view === "timeline") {
+                // Chatterbox has made it to the timeline!
+                // Store this is info in localStorage so that we know to load chatterbox in background
+                // in subsequent visits.
+                window.localStorage.setItem("chatterbox-should-load-in-background", "true");
+            }
             resizeIframe(event.data);
             break;
         case "minimize":
             toggleIframe();
             break;
+        case "unread-message":
+            setUnreadCount(event.data.count);
+            break;
     }
 });
 

src/ui/views/ChatterboxView.ts

@@ -10,7 +10,8 @@ export class ChatterboxView extends TemplateView<ChatterboxViewModel> {
     }
 
     render(t) {
-        return t.div({ className: "ChatterboxView" }, [
+        return t.div({ className: "ChatterboxView", },
+            [
             t.mapView(
                 (vm) => (vm.roomViewModel ? vm : null),
                 (vm) => (vm ? new RoomHeaderView(vm) : null)
@@ -39,7 +40,11 @@ class RoomHeaderView extends TemplateView<ChatterboxViewModel> {
             avatar,
             t.div({ className: "RoomHeaderView_name" }, vm => vm.roomName),
             t.div({ className: "RoomHeaderView_menu" }, [
-                t.button({ className: "RoomHeaderView_menu_minimize", onClick: () => (window as any).sendMinimizeToParent() })
+                t.button({
+                    className: "RoomHeaderView_menu_minimize", onClick: () => {
+                        vm.minimize();
+                    }
+                })
             ]),
         ]);
     }

src/viewmodels/ChatterboxViewModel.ts

@@ -3,11 +3,13 @@ import { RoomViewModel, ViewModel, RoomStatus} from "hydrogen-view-sdk";
 export class ChatterboxViewModel extends ViewModel {
     private _roomViewModel?: typeof RoomViewModel;
     private _loginPromise: Promise<void>;
+    private _minimize: () => void;
 
     constructor(options) {
         super(options);
         this._client = options.client;
         this._loginPromise = options.loginPromise;
+        this._minimize = options.minimize;
     }
 
     async load() {
@@ -22,13 +24,13 @@ export class ChatterboxViewModel extends ViewModel {
         else {
             throw new Error("ConfigError: You must either specify 'invite_user' or 'auto_join_room'");
         }
-        this._roomViewModel = new RoomViewModel({
+        this._roomViewModel = this.track(new RoomViewModel({
             room,
             ownUserId: this._session.userId,
             platform: this.platform,
             urlCreator: this.urlCreator,
             navigation: this.navigation,
-        });
+        }));
         await this._roomViewModel.load();
         this.emitChange("roomViewModel");
     }
@@ -87,6 +89,11 @@ export class ChatterboxViewModel extends ViewModel {
         return promise;
     }
 
+    minimize() {
+        (window as any).sendMinimizeToParent();
+        this._minimize();
+    }
+
     get timelineViewModel() {
         return this._roomViewModel?.timelineViewModel;
     }

src/viewmodels/RootViewModel.ts

-import { ViewModel, Client, Navigation, createRouter, Platform  } from "hydrogen-view-sdk";
+import { ViewModel, Client, Navigation, createRouter, Platform } from "hydrogen-view-sdk";
 import { IChatterboxConfig } from "../types/IChatterboxConfig";
 import { ChatterboxViewModel } from "./ChatterboxViewModel";
 import "hydrogen-view-sdk/style.css";
 import { AccountSetupViewModel } from "./AccountSetupViewModel";
+import { MessageFromParent } from "../observables/MessageFromParent";
 
-type Options = { platform: typeof Platform, navigation: typeof Navigation, urlCreator: ReturnType<typeof createRouter> };
+type Options = { platform: typeof Platform, navigation: typeof Navigation, urlCreator: ReturnType<typeof createRouter>, startMinimized: boolean };
 
 export class RootViewModel extends ViewModel {
     private _config: IChatterboxConfig;
@@ -12,12 +13,17 @@ export class RootViewModel extends ViewModel {
     private _chatterBoxViewModel?: ChatterboxViewModel;
     private _accountSetupViewModel?: AccountSetupViewModel;
     private _activeSection?: string;
+    private _messageFromParent: MessageFromParent = new MessageFromParent();
+    private _startMinimized: boolean;
 
     constructor(config: IChatterboxConfig, options: Options) {
         super(options);
+        this._startMinimized = options.startMinimized;
         this._config = config;
         this._client = new Client(this.platform);
         this._setupNavigation();
+        this._messageFromParent.on("maximize", () => this._showTimeline(Promise.resolve()));
+        this._messageFromParent.on("minimize", () => this.minimizeChatterbox());
     }
 
     private _setupNavigation() {
@@ -28,6 +34,10 @@ export class RootViewModel extends ViewModel {
     async start() {
         const sessionAlreadyExists = await this.attemptStartWithExistingSession();
         if (sessionAlreadyExists) {
+            this._watchNotificationCount();
+            if (this._startMinimized) {
+                return;
+            }
             this.navigation.push("timeline");
             return;
         }
@@ -43,6 +53,7 @@ export class RootViewModel extends ViewModel {
                     config: this._config,
                     state: this._state,
                     loginPromise,
+                    minimize: () => this.minimizeChatterbox()
                 })
             ));
             this._chatterBoxViewModel.load();
@@ -77,6 +88,32 @@ export class RootViewModel extends ViewModel {
         return false;
     }
 
+    private _watchNotificationCount() {
+        const [room] = this._client.session.rooms.values();
+        let previousCount = room.notificationCount;
+        (window as any).sendNotificationCount(previousCount);
+        const subscription = {
+            onUpdate(_: unknown, room) {
+                const newCount = room.notificationCount;
+                if (newCount !== previousCount) {
+                    if (!room.isUnread && newCount !== 0) {
+                        room.clearUnread();
+                        return;
+                    }
+                    (window as any).sendNotificationCount(newCount);
+                    previousCount = newCount;
+                }
+            },
+        };
+        this.track(this._client.session.rooms.subscribe(subscription));
+    }
+    
+    minimizeChatterbox() {
+        this._chatterBoxViewModel = this.disposeTracked(this._chatterBoxViewModel);
+        this._activeSection = "";
+        this.emitChange("chatterboxViewModel");
+    }
+
     get chatterboxViewModel() {
         return this._chatterBoxViewModel;
     }