Add options to hide header and composer of room view for the module api

src/components/structures/RoomView.tsx

@@ -44,7 +44,7 @@
 import { debounce, throttle } from "lodash";
 import { CryptoEvent } from "matrix-js-sdk/src/crypto-api";
 import { type ViewRoomOpts } from "@matrix-org/react-sdk-module-api/lib/lifecycles/RoomViewLifecycle";
 import { type RoomViewProps } from "@element-hq/element-web-module-api";
 
 import shouldHideEvent from "../../shouldHideEvent";
 import { _t } from "../../languageHandler";
@@ -159,6 +159,14 @@
 
     // Called with the credentials of a registered user (if they were a ROU that transitioned to PWLU)
     onRegistered?(credentials: IMatrixClientCreds): void;
+    /*
+     * If true, hide the header
+     */
+    hideHeader?: boolean;
+    /*
+     * If true, hide the composer
+     */
+    hideComposer?: boolean;
 }
 
 export { MainSplitContentType };
@@ -396,8 +404,8 @@
             throw new Error("Unable to create RoomView without MatrixClient");
         }
 
         if (props.roomId) {
             this.roomViewStore = this.context.multiRoomViewStore.getRoomViewStoreForRoom(props.roomId);
         } else {
             this.roomViewStore = context.roomViewStore;
         }
@@ -1041,7 +1049,7 @@
             this.context.client?.store.removeRoom(this.state.room.roomId);
         }
 
         if (this.props.roomId) this.context.multiRoomViewStore.removeRoomViewStore(this.props.roomId);
     }
 
     private onRightPanelStoreUpdate = (): void => {
@@ -2439,6 +2447,7 @@
 
         let messageComposer;
         const showComposer =
+            !this.props.hideComposer &&
             !isRoomEncryptionLoading &&
             // joined and not showing search results
             myMembership === KnownMembership.Join &&
@@ -2649,10 +2658,12 @@
                                 ref={this.roomViewBody}
                                 data-layout={this.state.layout}
                             >
-                                <RoomHeader
-                                    room={this.state.room}
-                                    additionalButtons={this.state.viewRoomOpts.buttons}
-                                />
+                                {!this.props.hideHeader && (
+                                    <RoomHeader
+                                        room={this.state.room}
+                                        additionalButtons={this.state.viewRoomOpts.buttons}
+                                    />
+                                )}
                                 {mainSplitBody}
                             </div>
                         </MainSplit>

src/modules/BuiltinsApi.tsx

@@ -6,13 +6,20 @@
 */
 
 import React from "react";
 import { type RoomViewProps, type BuiltinsApi } from "@element-hq/element-web-module-api";
 
 import RoomAvatar from "../components/views/avatars/RoomAvatar";
 import { getSafeCli } from "./common";
 
+interface RoomViewPropsWithRoomId extends RoomViewProps {
+    /**
+     * The ID of the room to display
+     */
+    roomId: string;
+}
+
 export class ElementWebBuiltinsApi implements BuiltinsApi {
-    private _roomView?: React.ComponentType<RoomViewProps>;
+    private _roomView?: React.ComponentType<RoomViewPropsWithRoomId>;
 
     /**
      * Sets the components used to render a RoomView
@@ -23,21 +30,21 @@
      *
      * @param component The RoomView component
      */
-    public setRoomViewComponent(component: React.ComponentType<RoomViewProps>): void {
+    public setRoomViewComponent(component: React.ComponentType<RoomViewPropsWithRoomId>): void {
         this._roomView = component;
     }
 
-    public getRoomViewComponent(): React.ComponentType<RoomViewProps> {
+    public getRoomViewComponent(): React.ComponentType<RoomViewPropsWithRoomId> {
         if (!this._roomView) {
             throw new Error("No RoomView component has been set");
         }
 
         return this._roomView;
     }
 
-    public renderRoomView(roomId: string): React.ReactNode {
+    public renderRoomView(roomId: string, props?: RoomViewProps): React.ReactNode {
         const Component = this.getRoomViewComponent();
-        return <Component roomId={roomId} />;
+        return <Component roomId={roomId} {...props} />;
     }
 
     public renderRoomAvatar(roomId: string, size?: string): React.ReactNode {