Implement UI for history visibility acknowledgement.

packages/shared-components/src/index.ts

@@ -17,6 +17,7 @@ export * from "./pill-input/Pill";
 export * from "./pill-input/PillInput";
 export * from "./rich-list/RichItem";
 export * from "./rich-list/RichList";
+export * from "./room/RoomStatusBarHistoryVisible";
 export * from "./utils/Box";
 export * from "./utils/Flex";
 

packages/shared-components/src/room/RoomStatusBarHistoryVisible/RoomStatusBarHistoryVisible.module.css

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+.historyVisibility {
+    border-radius: 0;
+    border-left: none;
+    border-right: none;
+    border-bottom: none;
+}
+
+.historyVisibilityButton {
+    white-space: nowrap;
+}

packages/shared-components/src/room/RoomStatusBarHistoryVisible/RoomStatusBarHistoryVisible.stories.tsx

@@ -0,0 +1,30 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import { type Meta, type StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+
+import { RoomStatusBarHistoryVisible } from "./RoomStatusBarHistoryVisible";
+
+const meta = {
+    title: "Structures/RoomStatusBarHistoryVisible",
+    component: RoomStatusBarHistoryVisible,
+    tags: ["autodocs"],
+    args: {
+        onClose: fn(),
+    },
+    parameters: {
+        design: {
+            type: "figma",
+            url: "https://www.figma.com/design/96hBf15is3HCxTt3X7nnLW/ER-144--Encrypted-Room-History?node-id=1-62053&t=zFsl3I946nBW8qq0-4",
+        },
+    },
+} satisfies Meta<typeof RoomStatusBarHistoryVisible>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};

packages/shared-components/src/room/RoomStatusBarHistoryVisible/RoomStatusBarHistoryVisible.tsx

@@ -0,0 +1,56 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type MouseEventHandler, type ReactElement } from "react";
+import { Alert, Button } from "@vector-im/compound-web";
+
+import styles from "./RoomStatusBarHistoryVisible.module.css";
+import { _t } from "../../utils/i18n";
+
+interface RoomStatusBarHistoryVisibleProps {
+    /**
+     * Called when the user presses the "dismiss" button.
+     */
+    onClose: MouseEventHandler<HTMLButtonElement>;
+}
+
+/**
+ * A component to alert that history is shared to new members of the room.
+ *
+ * @example
+ * ```tsx
+ *   <RoomStatusBarHistoryVisible onClose={onCloseHandler} />
+ * ```
+ */
+export function RoomStatusBarHistoryVisible(props: RoomStatusBarHistoryVisibleProps): ReactElement {
+    return (
+        <Alert
+            className={styles.historyVisibility}
+            type="info"
+            title={_t("room|status_bar|history_visible")}
+            actions={
+                <>
+                    <Button
+                        as="a"
+                        href="https://element.io/en/help#e2ee-history-sharing"
+                        target="_blank"
+                        className={styles.historyVisibilityButton}
+                        kind="tertiary"
+                        size="sm"
+                    >
+                        {_t("action|learn_more")}
+                    </Button>
+                    <Button className={styles.historyVisibilityButton} kind="primary" size="sm" onClick={props.onClose}>
+                        {_t("action|dismiss")}
+                    </Button>
+                </>
+            }
+        >
+            {_t("room|status_bar|history_visible_description")}
+        </Alert>
+    );
+}

packages/shared-components/src/room/RoomStatusBarHistoryVisible/index.ts

@@ -0,0 +1,8 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+export { RoomStatusBarHistoryVisible } from "./RoomStatusBarHistoryVisible";

res/css/structures/_RoomStatusBar.pcss

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-.mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages) {
+.mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages):not(.mx_RoomStatusBar_historyVisibility) {
     margin-left: 65px;
     min-height: 50px;
 }

src/components/structures/RoomStatusBar.tsx

@@ -16,9 +16,13 @@ import {
     RoomEvent,
     type SyncState,
     type SyncStateData,
+    HistoryVisibility,
+    RoomStateEvent,
+    type RoomState,
 } from "matrix-js-sdk/src/matrix";
 import { WarningIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
+import { RoomStatusBarHistoryVisible } from "../../../packages/shared-components/src/room/RoomStatusBarHistoryVisible";
 import { _t, _td } from "../../languageHandler";
 import Resend from "../../Resend";
 import dis from "../../dispatcher/dispatcher";
@@ -30,6 +34,8 @@ import InlineSpinner from "../views/elements/InlineSpinner";
 import MatrixClientContext from "../../contexts/MatrixClientContext";
 import { RoomStatusBarUnsentMessages } from "./RoomStatusBarUnsentMessages";
 import ExternalLink from "../views/elements/ExternalLink";
+import SettingsStore from "../../settings/SettingsStore";
+import { SettingLevel } from "../../settings/SettingLevel";
 
 const STATUS_BAR_HIDDEN = 0;
 const STATUS_BAR_EXPANDED = 1;
@@ -84,6 +90,9 @@ interface IState {
     syncStateData: SyncStateData | null;
     unsentMessages: MatrixEvent[];
     isResending: boolean;
+    roomHistoryVisibility: HistoryVisibility;
+    roomHasEncryptionStateEvent: boolean;
+    acknowledgedHistoryVisibility: boolean;
 }
 
 export default class RoomStatusBar extends React.PureComponent<IProps, IState> {
@@ -99,6 +108,9 @@ export default class RoomStatusBar extends React.PureComponent<IProps, IState> {
             syncStateData: this.context.getSyncStateData(),
             unsentMessages: getUnsentMessages(this.props.room),
             isResending: false,
+            roomHistoryVisibility: this.props.room.getHistoryVisibility(),
+            roomHasEncryptionStateEvent: this.props.room.hasEncryptionStateEvent(),
+            acknowledgedHistoryVisibility: this.getUpdatedAcknowledgedHistoryVisibility(),
         };
     }
 
@@ -108,6 +120,7 @@ export default class RoomStatusBar extends React.PureComponent<IProps, IState> {
         const client = this.context;
         client.on(ClientEvent.Sync, this.onSyncStateChange);
         client.on(RoomEvent.LocalEchoUpdated, this.onRoomLocalEchoUpdated);
+        client.on(RoomStateEvent.Update, this.onRoomStateEventUpdate);
 
         this.checkSize();
     }
@@ -123,6 +136,7 @@ export default class RoomStatusBar extends React.PureComponent<IProps, IState> {
         if (client) {
             client.removeListener(ClientEvent.Sync, this.onSyncStateChange);
             client.removeListener(RoomEvent.LocalEchoUpdated, this.onRoomLocalEchoUpdated);
+            client.removeListener(RoomStateEvent.Update, this.onRoomStateEventUpdate);
         }
     }
 
@@ -159,6 +173,22 @@ export default class RoomStatusBar extends React.PureComponent<IProps, IState> {
         });
     };
 
+    private onRoomStateEventUpdate = (state: RoomState): void => {
+        // prevent useless re-renders if the flag is disabled.
+        if (!SettingsStore.getValue("feature_share_history_on_invite")) {
+            return;
+        }
+
+        if (state.roomId !== this.props.room.roomId) {
+            return;
+        }
+        this.setState({
+            acknowledgedHistoryVisibility: this.getUpdatedAcknowledgedHistoryVisibility(),
+            roomHistoryVisibility: this.props.room.getHistoryVisibility(),
+            roomHasEncryptionStateEvent: this.props.room.hasEncryptionStateEvent(),
+        });
+    };
+
     // Check whether current size is greater than 0, if yes call props.onVisible
     private checkSize(): void {
         if (this.getSize()) {
@@ -174,7 +204,11 @@ export default class RoomStatusBar extends React.PureComponent<IProps, IState> {
     private getSize(): number {
         if (this.shouldShowConnectionError()) {
             return STATUS_BAR_EXPANDED;
-        } else if (this.state.unsentMessages.length > 0 || this.state.isResending) {
+        } else if (
+            this.state.unsentMessages.length > 0 ||
+            this.state.isResending ||
+            this.shouldShowHistoryVisibilityContent()
+        ) {
             return STATUS_BAR_EXPANDED_LARGE;
         }
         return STATUS_BAR_HIDDEN;
@@ -265,6 +299,85 @@ export default class RoomStatusBar extends React.PureComponent<IProps, IState> {
         );
     }
 
+    /**
+     * Gets the latest acknowledgement flag from the setting store.
+     *
+     * If the room history visibility was changed to `HistoryVisibility.Joined` since this method
+     * was last called, the flag is cleared in both the component state and settings.
+     *
+     * Additionally, while this feature is in development, this method will always return true unless
+     * the `feature_share_history_on_invite` lab is enabled.
+     */
+    private getUpdatedAcknowledgedHistoryVisibility(): boolean {
+        if (!SettingsStore.getValue("feature_share_history_on_invite")) {
+            return true;
+        }
+
+        let acknowledgedHistoryVisibility = SettingsStore.getValue(
+            "acknowledgedHistoryVisibility",
+            this.props.room.roomId,
+        );
+        if (this.props.room.getHistoryVisibility() === HistoryVisibility.Joined) {
+            acknowledgedHistoryVisibility = false;
+            // Clear the dismissed flag to ensure if a room is changed public -> private -> public,
+            // we show the banner again when it is set back to public.
+            void SettingsStore.setValue(
+                "acknowledgedHistoryVisibility",
+                this.props.room.roomId,
+                SettingLevel.ROOM_ACCOUNT,
+                false,
+            );
+        }
+        return acknowledgedHistoryVisibility;
+    }
+
+    /**
+     * Returns true if the history visibility acknowledgement banner should be shown.
+     *
+     * Shown when:
+     * - The room is encrypted
+     * - The room's history visibility is not set to `HistoryVisibility.Joined`
+     * - The user has not already acknowledged the alert
+     *
+     * Additionally, while this feature is in development, this will always return `false`
+     * unless the `feature_share_history_on_invite` lab is enabled.
+     */
+    private shouldShowHistoryVisibilityContent(): boolean {
+        if (!SettingsStore.getValue("feature_share_history_on_invite")) {
+            return false;
+        }
+
+        return (
+            this.state.roomHasEncryptionStateEvent &&
+            this.state.roomHistoryVisibility !== HistoryVisibility.Joined &&
+            !this.state.acknowledgedHistoryVisibility
+        );
+    }
+
+    /**
+     * Get the content for the history visibility acknowledgement banner.
+     *
+     * When the user closes the banner, the acknowledgement is saved in SettingsStore
+     * for this room, and the banner will not be shown again unless the history visibility changes.
+     */
+    private getHistoryVisibilityContent(): JSX.Element {
+        return (
+            <RoomStatusBarHistoryVisible
+                onClose={async () => {
+                    void SettingsStore.setValue(
+                        "acknowledgedHistoryVisibility",
+                        this.props.room.roomId,
+                        SettingLevel.ROOM_ACCOUNT,
+                        true,
+                    );
+                    this.setState({
+                        acknowledgedHistoryVisibility: true,
+                    });
+                }}
+            />
+        );
+    }
+
     public render(): React.ReactNode {
         if (this.shouldShowConnectionError()) {
             return (
@@ -290,6 +403,10 @@ export default class RoomStatusBar extends React.PureComponent<IProps, IState> {
             return this.getUnsentMessageContent();
         }
 
+        if (this.shouldShowHistoryVisibilityContent()) {
+            return this.getHistoryVisibilityContent();
+        }
+
         return null;
     }
 }

src/i18n/strings/en_EN.json

@@ -2110,6 +2110,8 @@
         "status_bar": {
             "delete_all": "Delete all",
             "exceeded_resource_limit": "Your message wasn't sent because this homeserver has exceeded a resource limit. Please <a>contact your service administrator</a> to continue using the service.",
+            "history_visible": "Messages you send will be shared with new members invited to this room.",
+            "history_visible_description": "room|status_bar|history_visible_description",
             "homeserver_blocked": "Your message wasn't sent because this homeserver has been blocked by its administrator. Please <a>contact your service administrator</a> to continue using the service.",
             "monthly_user_limit_reached": "Your message wasn't sent because this homeserver has hit its Monthly Active User Limit. Please <a>contact your service administrator</a> to continue using the service.",
             "requires_consent_agreement": "You can't send any messages until you review and agree to <consentLink>our terms and conditions</consentLink>.",

src/settings/Settings.tsx

@@ -369,6 +369,7 @@ export interface Settings {
     "mediaPreviewConfig": IBaseSetting<MediaPreviewConfig>;
     "inviteRules": IBaseSetting<ComputedInviteConfig>;
     "Developer.elementCallUrl": IBaseSetting<string>;
+    "acknowledgedHistoryVisibility": IBaseSetting<boolean>;
 }
 
 export type SettingKey = keyof Settings;
@@ -1473,4 +1474,8 @@ export const SETTINGS: Settings = {
         displayName: _td("devtools|settings|elementCallUrl"),
         default: "",
     },
+    "acknowledgedHistoryVisibility": {
+        supportedLevels: [SettingLevel.ROOM_ACCOUNT],
+        default: false,
+    },
 };

test/test-utils/test-utils.ts

@@ -9,14 +9,14 @@ Please see LICENSE files in the repository root for full details.
 import EventEmitter from "events";
 import { mocked, type MockedObject } from "jest-mock";
 import {
+    type EventTimeline,
     MatrixEvent,
     type Room,
     type User,
     type IContent,
     type IEvent,
     type RoomMember,
     type MatrixClient,
-    type EventTimeline,
     type RoomState,
     EventType,
     type IEventRelation,