diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss
index 6fd3897c5e7..15f331ebc91 100644
--- a/res/css/views/rooms/_RoomHeader.pcss
+++ b/res/css/views/rooms/_RoomHeader.pcss
@@ -87,3 +87,9 @@ limitations under the License.
background: var(--cpd-color-bg-subtle-primary);
}
}
+.mx_RoomHeader_ChatIcon {
+ * {
+ fill: $icon-button-color;
+ }
+ color: $icon-button-color;
+}
diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx
index f7ff511ce84..96aa99c386f 100644
--- a/src/components/views/rooms/RoomHeader.tsx
+++ b/src/components/views/rooms/RoomHeader.tsx
@@ -48,6 +48,8 @@ import RoomAvatar from "../avatars/RoomAvatar";
import { formatCount } from "../../../utils/FormattingUtils";
import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
import { Linkify, topicToHtml } from "../../../HtmlUtils";
+import { Icon as ChatIcon } from "../../../../res/img/element-icons/feedback.svg";
+import { isVideoRoom as calcIsVideoRoom } from "../../../utils/video-rooms";
/**
* A helper to transform a notification color to the what the Compound Icon Button
@@ -74,6 +76,7 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
const memberCount = useRoomMemberCount(room, { throttleWait: 2500 });
const { voiceCallDisabledReason, voiceCallClick, videoCallDisabledReason, videoCallClick } = useRoomCall(room);
+ const isVideoRoom = useFeatureEnabled("feature_video_rooms") && calcIsVideoRoom(room);
const groupCallsEnabled = useFeatureEnabled("feature_group_calls");
/**
@@ -189,6 +192,21 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
+ {/* Ensure that the chat button is only visible in video rooms */}
+ {isVideoRoom && (
+
+ {
+ evt.stopPropagation();
+ RightPanelStore.instance.showOrHidePanel(RightPanelPhases.Timeline);
+ }}
+ aria-label={_t("right_panel|video_room_chat|title")}
+ >
+
+
+
+ )}