2022-08-04 08:19:52 +02:00
// Jest Snapshot v1, https://goo.gl/fbAQLP
2022-12-09 10:37:25 +13:00
exports[`RoomView for a local room in state CREATING should match the snapshot 1`] = `
<div>
<div
class="mx_RoomView mx_RoomView--local"
>
<header
2025-07-22 18:25:45 +02:00
class="flex mx_RoomHeader light-panel"
2025-03-13 14:32:48 +01:00
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
2022-12-09 10:37:25 +13:00
>
2024-09-26 11:14:53 +01:00
<button
aria-label="Open room settings"
aria-live="off"
2025-02-24 18:08:12 +01:00
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
2024-09-26 11:14:53 +01:00
data-color="3"
data-testid="avatar-img"
data-type="round"
role="button"
style="--cpd-avatar-size: 40px;"
tabindex="-1"
>
u
</button>
2024-07-23 16:26:25 +05:30
<button
aria-label="Room info"
class="mx_RoomHeader_infoWrapper"
tabindex="0"
2022-12-09 10:37:25 +13:00
>
<div
2025-07-22 18:25:45 +02:00
class="mx_RoomHeader_info box-flex"
2024-07-23 16:26:25 +05:30
style="--mx-box-flex: 1;"
2022-12-09 10:37:25 +13:00
>
<div
2024-07-23 16:26:25 +05:30
aria-level="1"
2025-02-24 18:08:12 +01:00
class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 mx_RoomHeader_heading"
2024-07-23 16:26:25 +05:30
dir="auto"
role="heading"
2022-12-09 10:37:25 +13:00
>
2024-07-23 16:26:25 +05:30
<span
class="mx_RoomHeader_truncated mx_lineClamp"
>
@user:example.com
</span>
</div>
</div>
</button>
2024-12-18 09:55:59 +00:00
<button
aria-disabled="false"
aria-label="Video call"
2025-06-13 10:28:43 +02:00
class="_icon-button_1pz9o_8"
data-kind="primary"
2024-12-18 09:55:59 +00:00
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
2024-07-23 16:26:25 +05:30
>
2024-12-18 09:55:59 +00:00
<div
2025-02-24 18:08:12 +01:00
class="_indicator-icon_zr2a0_17"
2024-12-18 09:55:59 +00:00
style="--cpd-icon-button-size: 100%;"
2024-07-23 16:26:25 +05:30
>
2024-12-18 09:55:59 +00:00
<svg
2025-04-16 11:34:01 +02:00
aria-labelledby="«rh2»"
2024-12-18 09:55:59 +00:00
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
2024-07-23 16:26:25 +05:30
>
2024-12-18 09:55:59 +00:00
<path
2025-02-24 18:08:12 +01:00
d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4"
2024-12-18 09:55:59 +00:00
/>
</svg>
</div>
</button>
<button
aria-disabled="false"
aria-label="Voice call"
2025-04-16 11:34:01 +02:00
aria-labelledby="«rh7»"
2025-06-13 10:28:43 +02:00
class="_icon-button_1pz9o_8"
data-kind="primary"
2024-12-18 09:55:59 +00:00
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
2025-02-24 18:08:12 +01:00
class="_indicator-icon_zr2a0_17"
2024-12-18 09:55:59 +00:00
style="--cpd-icon-button-size: 100%;"
2024-07-23 16:26:25 +05:30
>
2024-12-18 09:55:59 +00:00
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
2024-07-23 16:26:25 +05:30
>
2024-12-18 09:55:59 +00:00
<path
2025-02-24 18:08:12 +01:00
d="m20.958 16.374.039 3.527q0 .427-.33.756-.33.33-.756.33a16 16 0 0 1-6.57-1.105 16.2 16.2 0 0 1-5.563-3.663 16.1 16.1 0 0 1-3.653-5.573 16.3 16.3 0 0 1-1.115-6.56q0-.427.33-.757T4.095 3l3.528.039a1.07 1.07 0 0 1 1.085.93l.543 3.954q.039.271-.039.504a1.1 1.1 0 0 1-.271.426l-1.64 1.64q.505 1.008 1.154 1.909c.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444q.9.65 1.909 1.153l1.64-1.64q.193-.193.426-.27t.504-.04l3.954.543q.406.059.668.359t.262.727"
2024-12-18 09:55:59 +00:00
/>
</svg>
</div>
</button>
<button
aria-label="Threads"
2025-04-16 11:34:01 +02:00
aria-labelledby="«rhc»"
2025-06-13 10:28:43 +02:00
class="_icon-button_1pz9o_8"
data-kind="primary"
2024-12-18 09:55:59 +00:00
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
2025-02-24 18:08:12 +01:00
class="_indicator-icon_zr2a0_17"
2024-12-18 09:55:59 +00:00
style="--cpd-icon-button-size: 100%;"
2024-07-23 16:26:25 +05:30
>
2024-12-18 09:55:59 +00:00
<svg
2025-01-27 20:35:46 +05:30
class=""
2024-12-18 09:55:59 +00:00
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
2024-07-23 16:26:25 +05:30
>
2024-12-18 09:55:59 +00:00
<path
2025-02-24 18:08:12 +01:00
d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2m3 7h10q.424 0 .712-.287A.97.97 0 0 0 18 9a.97.97 0 0 0-.288-.713A.97.97 0 0 0 17 8H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 9q0 .424.287.713Q6.576 10 7 10m0 4h6q.424 0 .713-.287A.97.97 0 0 0 14 13a.97.97 0 0 0-.287-.713A.97.97 0 0 0 13 12H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 13q0 .424.287.713Q6.576 14 7 14"
2024-12-18 09:55:59 +00:00
/>
</svg>
</div>
</button>
<button
aria-label="Room info"
2025-04-16 11:34:01 +02:00
aria-labelledby="«rhh»"
2025-06-13 10:28:43 +02:00
class="_icon-button_1pz9o_8"
data-kind="primary"
2024-12-18 09:55:59 +00:00
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
2025-02-24 18:08:12 +01:00
class="_indicator-icon_zr2a0_17"
2024-12-18 09:55:59 +00:00
style="--cpd-icon-button-size: 100%;"
2024-07-23 16:26:25 +05:30
>
2024-12-18 09:55:59 +00:00
<svg
2025-01-27 20:35:46 +05:30
class=""
2024-12-18 09:55:59 +00:00
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
2024-07-23 16:26:25 +05:30
>
2024-12-18 09:55:59 +00:00
<path
2025-02-24 18:08:12 +01:00
d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16v-4a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 11a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 12v4q0 .424.287.712.288.288.713.288m0-8q.424 0 .713-.287A.97.97 0 0 0 13 8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8q0 .424.287.713Q11.576 9 12 9m0 13a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
2024-12-18 09:55:59 +00:00
/>
</svg>
</div>
</button>
2024-07-23 16:26:25 +05:30
<div
2025-02-24 18:08:12 +01:00
class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41"
2024-07-23 16:26:25 +05:30
>
<div
aria-label="2 members"
2025-04-16 11:34:01 +02:00
aria-labelledby="«rhm»"
2024-07-23 16:26:25 +05:30
class="mx_AccessibleButton mx_FacePile"
role="button"
tabindex="0"
>
<div
2025-02-24 18:08:12 +01:00
class="_stacked-avatars_1qbcf_102"
2024-07-23 16:26:25 +05:30
>
<span
2025-02-24 18:08:12 +01:00
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
2024-07-23 16:26:25 +05:30
data-color="2"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 20px;"
>
u
</span>
2022-12-09 10:37:25 +13:00
<span
2025-02-24 18:08:12 +01:00
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
2023-08-24 04:48:35 +01:00
data-color="3"
data-testid="avatar-img"
data-type="round"
2022-12-09 10:37:25 +13:00
role="presentation"
2024-07-23 16:26:25 +05:30
style="--cpd-avatar-size: 20px;"
2022-12-09 10:37:25 +13:00
>
2023-08-24 04:48:35 +01:00
u
2022-12-09 10:37:25 +13:00
</span>
</div>
2024-07-23 16:26:25 +05:30
2
2022-12-09 10:37:25 +13:00
</div>
</div>
</header>
2025-08-26 17:29:41 +02:00
<div
class="mx_RoomView_body"
>
<div
class="mx_LargeLoader"
>
<div
class="mx_Spinner"
>
<div
aria-label="Loading…"
class="mx_Spinner_icon"
data-testid="spinner"
role="progressbar"
style="width: 45px; height: 45px;"
/>
</div>
<div
class="mx_LargeLoader_text"
>
We're creating a room with @user:example.com
</div>
</div>
</div>
</div>
</div>
`;
exports[`RoomView for a local room in state ERROR should match the snapshot 1`] = `
<div>
<div
class="mx_RoomView mx_RoomView--local"
>
<header
class="flex mx_RoomHeader light-panel"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
>
<button
aria-label="Open room settings"
aria-live="off"
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
data-color="3"
data-testid="avatar-img"
data-type="round"
role="button"
style="--cpd-avatar-size: 40px;"
tabindex="-1"
>
u
</button>
<button
aria-label="Room info"
class="mx_RoomHeader_infoWrapper"
tabindex="0"
>
<div
class="mx_RoomHeader_info box-flex"
style="--mx-box-flex: 1;"
>
<div
aria-level="1"
class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 mx_RoomHeader_heading"
dir="auto"
role="heading"
>
<span
class="mx_RoomHeader_truncated mx_lineClamp"
>
@user:example.com
</span>
</div>
</div>
</button>
<button
aria-disabled="false"
aria-label="Video call"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
class="_indicator-icon_zr2a0_17"
style="--cpd-icon-button-size: 100%;"
>
<svg
aria-labelledby="«ri0»"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4"
/>
</svg>
</div>
</button>
<button
aria-disabled="false"
aria-label="Voice call"
aria-labelledby="«ri5»"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
class="_indicator-icon_zr2a0_17"
style="--cpd-icon-button-size: 100%;"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m20.958 16.374.039 3.527q0 .427-.33.756-.33.33-.756.33a16 16 0 0 1-6.57-1.105 16.2 16.2 0 0 1-5.563-3.663 16.1 16.1 0 0 1-3.653-5.573 16.3 16.3 0 0 1-1.115-6.56q0-.427.33-.757T4.095 3l3.528.039a1.07 1.07 0 0 1 1.085.93l.543 3.954q.039.271-.039.504a1.1 1.1 0 0 1-.271.426l-1.64 1.64q.505 1.008 1.154 1.909c.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444q.9.65 1.909 1.153l1.64-1.64q.193-.193.426-.27t.504-.04l3.954.543q.406.059.668.359t.262.727"
/>
</svg>
</div>
</button>
<button
aria-label="Threads"
aria-labelledby="«ria»"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
class="_indicator-icon_zr2a0_17"
style="--cpd-icon-button-size: 100%;"
>
<svg
class=""
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2m3 7h10q.424 0 .712-.287A.97.97 0 0 0 18 9a.97.97 0 0 0-.288-.713A.97.97 0 0 0 17 8H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 9q0 .424.287.713Q6.576 10 7 10m0 4h6q.424 0 .713-.287A.97.97 0 0 0 14 13a.97.97 0 0 0-.287-.713A.97.97 0 0 0 13 12H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 13q0 .424.287.713Q6.576 14 7 14"
/>
</svg>
</div>
</button>
<button
aria-label="Room info"
aria-labelledby="«rif»"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
class="_indicator-icon_zr2a0_17"
style="--cpd-icon-button-size: 100%;"
>
<svg
class=""
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16v-4a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 11a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 12v4q0 .424.287.712.288.288.713.288m0-8q.424 0 .713-.287A.97.97 0 0 0 13 8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8q0 .424.287.713Q11.576 9 12 9m0 13a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
/>
</svg>
</div>
</button>
<div
class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41"
>
<div
aria-label="2 members"
aria-labelledby="«rik»"
class="mx_AccessibleButton mx_FacePile"
role="button"
tabindex="0"
>
<div
class="_stacked-avatars_1qbcf_102"
>
<span
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
data-color="2"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 20px;"
>
u
</span>
<span
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
data-color="3"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 20px;"
>
u
</span>
</div>
2
</div>
</div>
</header>
2022-12-09 10:37:25 +13:00
<main
2025-06-12 16:42:30 +01:00
aria-label="Room content"
2022-12-09 10:37:25 +13:00
class="mx_RoomView_body"
>
<div
class="mx_RoomView_timeline"
>
<div
class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
tabindex="-1"
>
<div
class="mx_RoomView_messageListWrapper"
>
<ol
aria-live="polite"
class="mx_RoomView_MessageList"
style="height: 400px;"
>
<li
class="mx_NewRoomIntro"
>
<div
class="mx_EventTileBubble mx_cryptoEvent mx_cryptoEvent_icon_warning"
>
<div
class="mx_EventTileBubble_title"
>
End-to-end encryption isn't enabled
</div>
<div
class="mx_EventTileBubble_subtitle"
>
<span>
Your private messages are normally encrypted, but this room isn't. Usually this is due to an unsupported device or method being used, like email invites.
</span>
</div>
</div>
2023-08-24 04:48:35 +01:00
<button
2022-12-09 10:37:25 +13:00
aria-label="Avatar"
aria-live="off"
2025-02-24 18:08:12 +01:00
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
2023-08-24 04:48:35 +01:00
data-color="3"
data-testid="avatar-img"
data-type="round"
2022-12-09 10:37:25 +13:00
role="button"
2023-08-24 04:48:35 +01:00
style="--cpd-avatar-size: 52px;"
2022-12-09 10:37:25 +13:00
>
2023-08-24 04:48:35 +01:00
u
</button>
2022-12-09 10:37:25 +13:00
<h2>
@user:example.com
</h2>
<p>
<span>
Send your first message to invite
2024-09-13 12:34:15 +01:00
<strong>
2022-12-09 10:37:25 +13:00
@user:example.com
2024-09-13 12:34:15 +01:00
</strong>
2022-12-09 10:37:25 +13:00
to chat
</span>
</p>
</li>
</ol>
</div>
</div>
</div>
<div
class="mx_RoomStatusBar mx_RoomStatusBar_unsentMessages"
>
<div
role="alert"
>
<div
class="mx_RoomStatusBar_unsentBadge"
>
<div
2024-03-21 20:27:13 -04:00
class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_highlight mx_NotificationBadge_2char cpd-theme-light"
2022-12-09 10:37:25 +13:00
>
<span
class="mx_NotificationBadge_count"
>
!
</span>
</div>
</div>
<div>
<div
class="mx_RoomStatusBar_unsentTitle"
>
Some of your messages have not been sent
</div>
</div>
<div
class="mx_RoomStatusBar_unsentButtonBar"
>
<div
class="mx_AccessibleButton mx_RoomStatusBar_unsentRetry"
role="button"
tabindex="0"
>
Retry
</div>
</div>
</div>
</div>
</main>
</div>
</div>
`;
2022-08-04 08:19:52 +02:00
2022-12-09 10:37:25 +13:00
exports[`RoomView for a local room in state NEW should match the snapshot 1`] = `
<div>
<div
class="mx_RoomView mx_RoomView--local"
>
<header
2025-07-22 18:25:45 +02:00
class="flex mx_RoomHeader light-panel"
2025-03-13 14:32:48 +01:00
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
2022-12-09 10:37:25 +13:00
>
2024-09-26 11:14:53 +01:00
<button
aria-label="Open room settings"
aria-live="off"
2025-02-24 18:08:12 +01:00
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
2024-09-26 11:14:53 +01:00
data-color="3"
data-testid="avatar-img"
data-type="round"
role="button"
style="--cpd-avatar-size: 40px;"
tabindex="-1"
>
u
</button>
2024-07-23 16:26:25 +05:30
<button
aria-label="Room info"
class="mx_RoomHeader_infoWrapper"
tabindex="0"
2022-12-09 10:37:25 +13:00
>
<div
2025-07-22 18:25:45 +02:00
class="mx_RoomHeader_info box-flex"
2024-07-23 16:26:25 +05:30
style="--mx-box-flex: 1;"
2022-12-09 10:37:25 +13:00
>
<div
2024-07-23 16:26:25 +05:30
aria-level="1"
2025-02-24 18:08:12 +01:00
class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 mx_RoomHeader_heading"
2024-07-23 16:26:25 +05:30
dir="auto"
role="heading"
2022-12-09 10:37:25 +13:00
>
2024-07-23 16:26:25 +05:30
<span
class="mx_RoomHeader_truncated mx_lineClamp"
>
@user:example.com
</span>
</div>
</div>
</button>
2024-12-18 09:55:59 +00:00
<button
aria-disabled="false"
aria-label="Video call"
2025-06-13 10:28:43 +02:00
class="_icon-button_1pz9o_8"
data-kind="primary"
2024-12-18 09:55:59 +00:00
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
2024-07-23 16:26:25 +05:30
>
2024-12-18 09:55:59 +00:00
<div
2025-02-24 18:08:12 +01:00
class="_indicator-icon_zr2a0_17"
2024-12-18 09:55:59 +00:00
style="--cpd-icon-button-size: 100%;"
2024-07-23 16:26:25 +05:30
>
2024-12-18 09:55:59 +00:00
<svg
2025-08-26 17:29:41 +02:00
aria-labelledby="«rca»"
2024-12-18 09:55:59 +00:00
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
2024-07-23 16:26:25 +05:30
>
2024-12-18 09:55:59 +00:00
<path
2025-02-24 18:08:12 +01:00
d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4"
2024-12-18 09:55:59 +00:00
/>
</svg>
</div>
</button>
<button
aria-disabled="false"
aria-label="Voice call"
2025-08-26 17:29:41 +02:00
aria-labelledby="«rcf»"
2025-06-13 10:28:43 +02:00
class="_icon-button_1pz9o_8"
data-kind="primary"
2024-12-18 09:55:59 +00:00
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
2025-02-24 18:08:12 +01:00
class="_indicator-icon_zr2a0_17"
2024-12-18 09:55:59 +00:00
style="--cpd-icon-button-size: 100%;"
2024-07-23 16:26:25 +05:30
>
2024-12-18 09:55:59 +00:00
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
2024-07-23 16:26:25 +05:30
>
2024-12-18 09:55:59 +00:00
<path
2025-02-24 18:08:12 +01:00
d="m20.958 16.374.039 3.527q0 .427-.33.756-.33.33-.756.33a16 16 0 0 1-6.57-1.105 16.2 16.2 0 0 1-5.563-3.663 16.1 16.1 0 0 1-3.653-5.573 16.3 16.3 0 0 1-1.115-6.56q0-.427.33-.757T4.095 3l3.528.039a1.07 1.07 0 0 1 1.085.93l.543 3.954q.039.271-.039.504a1.1 1.1 0 0 1-.271.426l-1.64 1.64q.505 1.008 1.154 1.909c.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444q.9.65 1.909 1.153l1.64-1.64q.193-.193.426-.27t.504-.04l3.954.543q.406.059.668.359t.262.727"
2024-12-18 09:55:59 +00:00
/>
</svg>
</div>
</button>
<button
aria-label="Threads"
2025-08-26 17:29:41 +02:00
aria-labelledby="«rck»"
2025-06-13 10:28:43 +02:00
class="_icon-button_1pz9o_8"
data-kind="primary"
2024-12-18 09:55:59 +00:00
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
2025-02-24 18:08:12 +01:00
class="_indicator-icon_zr2a0_17"
2024-12-18 09:55:59 +00:00
style="--cpd-icon-button-size: 100%;"
2024-07-23 16:26:25 +05:30
>
2024-12-18 09:55:59 +00:00
<svg
2025-01-27 20:35:46 +05:30
class=""
2024-12-18 09:55:59 +00:00
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
2024-07-23 16:26:25 +05:30
>
2024-12-18 09:55:59 +00:00
<path
2025-02-24 18:08:12 +01:00
d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2m3 7h10q.424 0 .712-.287A.97.97 0 0 0 18 9a.97.97 0 0 0-.288-.713A.97.97 0 0 0 17 8H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 9q0 .424.287.713Q6.576 10 7 10m0 4h6q.424 0 .713-.287A.97.97 0 0 0 14 13a.97.97 0 0 0-.287-.713A.97.97 0 0 0 13 12H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 13q0 .424.287.713Q6.576 14 7 14"
2024-12-18 09:55:59 +00:00
/>
</svg>
</div>
</button>
<button
aria-label="Room info"
2025-08-26 17:29:41 +02:00
aria-labelledby="«rcp»"
2025-06-13 10:28:43 +02:00
class="_icon-button_1pz9o_8"
data-kind="primary"
2024-12-18 09:55:59 +00:00
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
2025-02-24 18:08:12 +01:00
class="_indicator-icon_zr2a0_17"
2024-12-18 09:55:59 +00:00
style="--cpd-icon-button-size: 100%;"
2024-07-23 16:26:25 +05:30
>
2024-12-18 09:55:59 +00:00
<svg
2025-01-27 20:35:46 +05:30
class=""
2024-12-18 09:55:59 +00:00
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
2024-07-23 16:26:25 +05:30
>
2024-12-18 09:55:59 +00:00
<path
2025-02-24 18:08:12 +01:00
d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16v-4a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 11a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 12v4q0 .424.287.712.288.288.713.288m0-8q.424 0 .713-.287A.97.97 0 0 0 13 8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8q0 .424.287.713Q11.576 9 12 9m0 13a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
2024-12-18 09:55:59 +00:00
/>
</svg>
</div>
</button>
2024-07-23 16:26:25 +05:30
<div
2025-02-24 18:08:12 +01:00
class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41"
2024-07-23 16:26:25 +05:30
>
<div
aria-label="2 members"
2025-08-26 17:29:41 +02:00
aria-labelledby="«rcu»"
2024-07-23 16:26:25 +05:30
class="mx_AccessibleButton mx_FacePile"
role="button"
tabindex="0"
>
<div
2025-02-24 18:08:12 +01:00
class="_stacked-avatars_1qbcf_102"
2024-07-23 16:26:25 +05:30
>
<span
2025-02-24 18:08:12 +01:00
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
2024-07-23 16:26:25 +05:30
data-color="2"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 20px;"
>
u
</span>
2022-12-09 10:37:25 +13:00
<span
2025-02-24 18:08:12 +01:00
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
2023-08-24 04:48:35 +01:00
data-color="3"
data-testid="avatar-img"
data-type="round"
2022-12-09 10:37:25 +13:00
role="presentation"
2024-07-23 16:26:25 +05:30
style="--cpd-avatar-size: 20px;"
2022-12-09 10:37:25 +13:00
>
2023-08-24 04:48:35 +01:00
u
2022-12-09 10:37:25 +13:00
</span>
</div>
2024-07-23 16:26:25 +05:30
2
2022-12-09 10:37:25 +13:00
</div>
</div>
</header>
<main
2025-06-12 16:42:30 +01:00
aria-label="Room content"
2022-12-09 10:37:25 +13:00
class="mx_RoomView_body"
>
<div
class="mx_RoomView_timeline"
>
<div
class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
tabindex="-1"
>
<div
class="mx_RoomView_messageListWrapper"
>
<ol
aria-live="polite"
class="mx_RoomView_MessageList"
style="height: 400px;"
>
<li
class="mx_NewRoomIntro"
>
<div
class="mx_EventTileBubble mx_cryptoEvent mx_cryptoEvent_icon_warning"
>
<div
class="mx_EventTileBubble_title"
>
End-to-end encryption isn't enabled
</div>
<div
class="mx_EventTileBubble_subtitle"
>
<span>
Your private messages are normally encrypted, but this room isn't. Usually this is due to an unsupported device or method being used, like email invites.
</span>
</div>
</div>
2023-08-24 04:48:35 +01:00
<button
2022-12-09 10:37:25 +13:00
aria-label="Avatar"
aria-live="off"
2025-02-24 18:08:12 +01:00
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
2023-08-24 04:48:35 +01:00
data-color="3"
data-testid="avatar-img"
data-type="round"
2022-12-09 10:37:25 +13:00
role="button"
2023-08-24 04:48:35 +01:00
style="--cpd-avatar-size: 52px;"
2022-12-09 10:37:25 +13:00
>
2023-08-24 04:48:35 +01:00
u
</button>
2022-12-09 10:37:25 +13:00
<h2>
@user:example.com
</h2>
<p>
<span>
Send your first message to invite
2024-09-13 12:34:15 +01:00
<strong>
2022-12-09 10:37:25 +13:00
@user:example.com
2024-09-13 12:34:15 +01:00
</strong>
2022-12-09 10:37:25 +13:00
to chat
</span>
</p>
</li>
</ol>
</div>
</div>
</div>
<div
2023-12-20 15:32:24 +00:00
aria-label="Message composer"
2025-08-11 10:35:04 +01:00
class="mx_MessageComposer mx_MessageComposer_e2eStatus"
2023-12-20 15:32:24 +00:00
role="region"
2022-12-09 10:37:25 +13:00
>
<div
class="mx_MessageComposer_wrapper"
>
<div
class="mx_MessageComposer_row"
>
2025-08-11 10:35:04 +01:00
<div
class="mx_MessageComposer_e2eIconWrapper"
>
<svg
2025-08-26 17:29:41 +02:00
aria-label="Messages in this room are not end-to-end encrypted"
aria-labelledby="«rd7»"
2025-08-11 10:35:04 +01:00
class="mx_E2EIcon mx_MessageComposer_e2eIcon"
color="var(--cpd-color-icon-info-primary)"
fill="currentColor"
height="12"
viewBox="0 0 24 24"
width="12"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 22q-.825 0-1.412-.587A1.93 1.93 0 0 1 4 20V10q0-.825.588-1.412a2 2 0 0 1 .702-.463L1.333 4.167a1 1 0 0 1 1.414-1.414L7 7.006v-.012l13 13v.012l1.247 1.247a1 1 0 1 1-1.414 1.414l-.896-.896A1.94 1.94 0 0 1 18 22zm14-4.834V10q0-.825-.587-1.412A1.93 1.93 0 0 0 18 8h-1V6q0-2.075-1.463-3.537Q14.075 1 12 1T8.463 2.463a4.9 4.9 0 0 0-1.22 1.946L9 6.166V6q0-1.25.875-2.125A2.9 2.9 0 0 1 12 3q1.25 0 2.125.875T15 6v2h-4.166z"
/>
</svg>
</div>
2022-12-09 10:37:25 +13:00
<div
class="mx_SendMessageComposer"
>
<div
class="mx_BasicMessageComposer"
>
<div
2023-04-12 14:58:38 +01:00
aria-label="Formatting"
2022-12-09 10:37:25 +13:00
class="mx_MessageComposerFormatBar"
2023-04-12 14:58:38 +01:00
role="toolbar"
2022-12-09 10:37:25 +13:00
>
<button
aria-label="Bold"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconBold"
role="button"
tabindex="0"
type="button"
/>
<button
aria-label="Italics"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic"
role="button"
2023-04-12 14:58:38 +01:00
tabindex="-1"
2022-12-09 10:37:25 +13:00
type="button"
/>
<button
aria-label="Strikethrough"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough"
role="button"
2023-04-12 14:58:38 +01:00
tabindex="-1"
2022-12-09 10:37:25 +13:00
type="button"
/>
<button
aria-label="Code block"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode"
role="button"
2023-04-12 14:58:38 +01:00
tabindex="-1"
2022-12-09 10:37:25 +13:00
type="button"
/>
<button
aria-label="Quote"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote"
role="button"
2023-04-12 14:58:38 +01:00
tabindex="-1"
2022-12-09 10:37:25 +13:00
type="button"
/>
<button
aria-label="Insert link"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink"
role="button"
2023-04-12 14:58:38 +01:00
tabindex="-1"
2022-12-09 10:37:25 +13:00
type="button"
/>
</div>
<div
aria-autocomplete="list"
aria-disabled="false"
aria-haspopup="listbox"
2025-08-07 13:25:34 +02:00
aria-label="Send an unencrypted message…"
2022-12-09 10:37:25 +13:00
aria-multiline="true"
class="mx_BasicMessageComposer_input mx_BasicMessageComposer_input_shouldShowPillAvatar mx_BasicMessageComposer_inputEmpty"
contenteditable="true"
data-testid="basicmessagecomposer"
dir="auto"
role="textbox"
2025-08-07 13:25:34 +02:00
style="--placeholder: 'Send\\ an\\ unencrypted\\ message…';"
2022-12-09 10:37:25 +13:00
tabindex="0"
2023-06-27 10:48:32 +02:00
translate="no"
2022-12-09 10:37:25 +13:00
>
<div>
<br />
</div>
</div>
</div>
</div>
<div
class="mx_MessageComposer_actions"
>
<div
aria-label="Emoji"
class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button mx_EmojiButton_icon"
role="button"
tabindex="0"
/>
<div
aria-label="Attachment"
class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload"
role="button"
tabindex="0"
/>
<div
aria-label="More options"
class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
role="button"
tabindex="0"
/>
<input
multiple=""
style="display: none;"
type="file"
/>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
`;
2022-08-04 08:19:52 +02:00
2022-12-09 10:37:25 +13:00
exports[`RoomView for a local room in state NEW that is encrypted should match the snapshot 1`] = `
<div>
<div
class="mx_RoomView mx_RoomView--local"
>
<header
2025-07-22 18:25:45 +02:00
class="flex mx_RoomHeader light-panel"
2025-03-13 14:32:48 +01:00
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
2022-12-09 10:37:25 +13:00
>
2024-09-26 11:14:53 +01:00
<button
aria-label="Open room settings"
aria-live="off"
2025-02-24 18:08:12 +01:00
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
2024-09-26 11:14:53 +01:00
data-color="3"
data-testid="avatar-img"
data-type="round"
role="button"
style="--cpd-avatar-size: 40px;"
tabindex="-1"
>
u
</button>
2024-07-23 16:26:25 +05:30
<button
aria-label="Room info"
class="mx_RoomHeader_infoWrapper"
tabindex="0"
2022-12-09 10:37:25 +13:00
>
<div
2025-07-22 18:25:45 +02:00
class="mx_RoomHeader_info box-flex"
2024-07-23 16:26:25 +05:30
style="--mx-box-flex: 1;"
2022-12-09 10:37:25 +13:00
>
<div
2024-07-23 16:26:25 +05:30
aria-level="1"
2025-02-24 18:08:12 +01:00
class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 mx_RoomHeader_heading"
2024-07-23 16:26:25 +05:30
dir="auto"
role="heading"
2022-12-09 10:37:25 +13:00
>
2024-07-23 16:26:25 +05:30
<span
class="mx_RoomHeader_truncated mx_lineClamp"
>
@user:example.com
</span>
</div>
</div>
</button>
2024-12-18 09:55:59 +00:00
<button
aria-disabled="false"
aria-label="Video call"
2025-06-13 10:28:43 +02:00
class="_icon-button_1pz9o_8"
data-kind="primary"
2024-12-18 09:55:59 +00:00
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
2024-07-23 16:26:25 +05:30
>
2024-12-18 09:55:59 +00:00
<div
2025-02-24 18:08:12 +01:00
class="_indicator-icon_zr2a0_17"
2024-12-18 09:55:59 +00:00
style="--cpd-icon-button-size: 100%;"
2024-07-23 16:26:25 +05:30
>
2024-12-18 09:55:59 +00:00
<svg
2025-08-26 17:29:41 +02:00
aria-labelledby="«rem»"
2024-12-18 09:55:59 +00:00
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
2024-07-23 16:26:25 +05:30
>
2024-12-18 09:55:59 +00:00
<path
2025-02-24 18:08:12 +01:00
d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4"
2024-12-18 09:55:59 +00:00
/>
</svg>
</div>
</button>
<button
aria-disabled="false"
aria-label="Voice call"
2025-08-26 17:29:41 +02:00
aria-labelledby="«rer»"
2025-06-13 10:28:43 +02:00
class="_icon-button_1pz9o_8"
data-kind="primary"
2024-12-18 09:55:59 +00:00
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
2025-02-24 18:08:12 +01:00
class="_indicator-icon_zr2a0_17"
2024-12-18 09:55:59 +00:00
style="--cpd-icon-button-size: 100%;"
2024-07-23 16:26:25 +05:30
>
2024-12-18 09:55:59 +00:00
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
2024-07-23 16:26:25 +05:30
>
2024-12-18 09:55:59 +00:00
<path
2025-02-24 18:08:12 +01:00
d="m20.958 16.374.039 3.527q0 .427-.33.756-.33.33-.756.33a16 16 0 0 1-6.57-1.105 16.2 16.2 0 0 1-5.563-3.663 16.1 16.1 0 0 1-3.653-5.573 16.3 16.3 0 0 1-1.115-6.56q0-.427.33-.757T4.095 3l3.528.039a1.07 1.07 0 0 1 1.085.93l.543 3.954q.039.271-.039.504a1.1 1.1 0 0 1-.271.426l-1.64 1.64q.505 1.008 1.154 1.909c.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444q.9.65 1.909 1.153l1.64-1.64q.193-.193.426-.27t.504-.04l3.954.543q.406.059.668.359t.262.727"
2024-12-18 09:55:59 +00:00
/>
</svg>
</div>
</button>
<button
aria-label="Threads"
2025-08-26 17:29:41 +02:00
aria-labelledby="«rf0»"
2025-06-13 10:28:43 +02:00
class="_icon-button_1pz9o_8"
data-kind="primary"
2024-12-18 09:55:59 +00:00
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
2025-02-24 18:08:12 +01:00
class="_indicator-icon_zr2a0_17"
2024-12-18 09:55:59 +00:00
style="--cpd-icon-button-size: 100%;"
2024-07-23 16:26:25 +05:30
>
2024-12-18 09:55:59 +00:00
<svg
2025-01-27 20:35:46 +05:30
class=""
2024-12-18 09:55:59 +00:00
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
2024-07-23 16:26:25 +05:30
>
2024-12-18 09:55:59 +00:00
<path
2025-02-24 18:08:12 +01:00
d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2m3 7h10q.424 0 .712-.287A.97.97 0 0 0 18 9a.97.97 0 0 0-.288-.713A.97.97 0 0 0 17 8H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 9q0 .424.287.713Q6.576 10 7 10m0 4h6q.424 0 .713-.287A.97.97 0 0 0 14 13a.97.97 0 0 0-.287-.713A.97.97 0 0 0 13 12H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 13q0 .424.287.713Q6.576 14 7 14"
2024-12-18 09:55:59 +00:00
/>
</svg>
</div>
</button>
<button
aria-label="Room info"
2025-08-26 17:29:41 +02:00
aria-labelledby="«rf5»"
2025-06-13 10:28:43 +02:00
class="_icon-button_1pz9o_8"
data-kind="primary"
2024-12-18 09:55:59 +00:00
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
2025-02-24 18:08:12 +01:00
class="_indicator-icon_zr2a0_17"
2024-12-18 09:55:59 +00:00
style="--cpd-icon-button-size: 100%;"
2024-07-23 16:26:25 +05:30
>
2024-12-18 09:55:59 +00:00
<svg
2025-01-27 20:35:46 +05:30
class=""
2024-12-18 09:55:59 +00:00
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
2024-07-23 16:26:25 +05:30
>
2024-12-18 09:55:59 +00:00
<path
2025-02-24 18:08:12 +01:00
d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16v-4a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 11a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 12v4q0 .424.287.712.288.288.713.288m0-8q.424 0 .713-.287A.97.97 0 0 0 13 8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8q0 .424.287.713Q11.576 9 12 9m0 13a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
2024-12-18 09:55:59 +00:00
/>
</svg>
</div>
</button>
2024-07-23 16:26:25 +05:30
<div
2025-02-24 18:08:12 +01:00
class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41"
2024-07-23 16:26:25 +05:30
>
<div
aria-label="2 members"
2025-08-26 17:29:41 +02:00
aria-labelledby="«rfa»"
2024-07-23 16:26:25 +05:30
class="mx_AccessibleButton mx_FacePile"
role="button"
tabindex="0"
>
<div
2025-02-24 18:08:12 +01:00
class="_stacked-avatars_1qbcf_102"
2024-07-23 16:26:25 +05:30
>
<span
2025-02-24 18:08:12 +01:00
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
2024-07-23 16:26:25 +05:30
data-color="2"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 20px;"
>
u
</span>
2022-12-09 10:37:25 +13:00
<span
2025-02-24 18:08:12 +01:00
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
2023-08-24 04:48:35 +01:00
data-color="3"
data-testid="avatar-img"
data-type="round"
2022-12-09 10:37:25 +13:00
role="presentation"
2024-07-23 16:26:25 +05:30
style="--cpd-avatar-size: 20px;"
2022-12-09 10:37:25 +13:00
>
2023-08-24 04:48:35 +01:00
u
2022-12-09 10:37:25 +13:00
</span>
</div>
2024-07-23 16:26:25 +05:30
2
2022-12-09 10:37:25 +13:00
</div>
</div>
</header>
<main
2025-06-12 16:42:30 +01:00
aria-label="Room content"
2022-12-09 10:37:25 +13:00
class="mx_RoomView_body"
>
<div
class="mx_RoomView_timeline"
>
<div
class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
tabindex="-1"
>
<div
class="mx_RoomView_messageListWrapper"
>
<ol
aria-live="polite"
class="mx_RoomView_MessageList"
style="height: 400px;"
>
<div
class="mx_EventTileBubble mx_cryptoEvent mx_cryptoEvent_icon"
>
<div
class="mx_EventTileBubble_title"
>
Encryption enabled
</div>
<div
class="mx_EventTileBubble_subtitle"
>
Messages in this chat will be end-to-end encrypted.
</div>
</div>
<li
class="mx_NewRoomIntro"
>
2023-08-24 04:48:35 +01:00
<button
2022-12-09 10:37:25 +13:00
aria-label="Avatar"
aria-live="off"
2025-02-24 18:08:12 +01:00
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
2023-08-24 04:48:35 +01:00
data-color="3"
data-testid="avatar-img"
data-type="round"
2022-12-09 10:37:25 +13:00
role="button"
2023-08-24 04:48:35 +01:00
style="--cpd-avatar-size: 52px;"
2022-12-09 10:37:25 +13:00
>
2023-08-24 04:48:35 +01:00
u
</button>
2022-12-09 10:37:25 +13:00
<h2>
@user:example.com
</h2>
<p>
<span>
Send your first message to invite
2024-09-13 12:34:15 +01:00
<strong>
2022-12-09 10:37:25 +13:00
@user:example.com
2024-09-13 12:34:15 +01:00
</strong>
2022-12-09 10:37:25 +13:00
to chat
</span>
</p>
</li>
</ol>
</div>
</div>
</div>
<div
2023-12-20 15:32:24 +00:00
aria-label="Message composer"
2025-08-11 10:35:04 +01:00
class="mx_MessageComposer mx_MessageComposer_e2eStatus"
2023-12-20 15:32:24 +00:00
role="region"
2022-12-09 10:37:25 +13:00
>
<div
class="mx_MessageComposer_wrapper"
>
<div
class="mx_MessageComposer_row"
>
2025-08-11 10:35:04 +01:00
<div
class="mx_MessageComposer_e2eIconWrapper"
>
<svg
2025-08-26 17:29:41 +02:00
aria-label="Messages in this room are not end-to-end encrypted"
aria-labelledby="«rfj»"
2025-08-11 10:35:04 +01:00
class="mx_E2EIcon mx_MessageComposer_e2eIcon"
color="var(--cpd-color-icon-info-primary)"
fill="currentColor"
height="12"
viewBox="0 0 24 24"
width="12"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 22q-.825 0-1.412-.587A1.93 1.93 0 0 1 4 20V10q0-.825.588-1.412a2 2 0 0 1 .702-.463L1.333 4.167a1 1 0 0 1 1.414-1.414L7 7.006v-.012l13 13v.012l1.247 1.247a1 1 0 1 1-1.414 1.414l-.896-.896A1.94 1.94 0 0 1 18 22zm14-4.834V10q0-.825-.587-1.412A1.93 1.93 0 0 0 18 8h-1V6q0-2.075-1.463-3.537Q14.075 1 12 1T8.463 2.463a4.9 4.9 0 0 0-1.22 1.946L9 6.166V6q0-1.25.875-2.125A2.9 2.9 0 0 1 12 3q1.25 0 2.125.875T15 6v2h-4.166z"
/>
</svg>
</div>
2022-12-09 10:37:25 +13:00
<div
class="mx_SendMessageComposer"
>
<div
class="mx_BasicMessageComposer"
>
<div
2023-04-12 14:58:38 +01:00
aria-label="Formatting"
2022-12-09 10:37:25 +13:00
class="mx_MessageComposerFormatBar"
2023-04-12 14:58:38 +01:00
role="toolbar"
2022-12-09 10:37:25 +13:00
>
<button
aria-label="Bold"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconBold"
role="button"
tabindex="0"
type="button"
/>
<button
aria-label="Italics"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic"
role="button"
2023-04-12 14:58:38 +01:00
tabindex="-1"
2022-12-09 10:37:25 +13:00
type="button"
/>
<button
aria-label="Strikethrough"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough"
role="button"
2023-04-12 14:58:38 +01:00
tabindex="-1"
2022-12-09 10:37:25 +13:00
type="button"
/>
<button
aria-label="Code block"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode"
role="button"
2023-04-12 14:58:38 +01:00
tabindex="-1"
2022-12-09 10:37:25 +13:00
type="button"
/>
<button
aria-label="Quote"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote"
role="button"
2023-04-12 14:58:38 +01:00
tabindex="-1"
2022-12-09 10:37:25 +13:00
type="button"
/>
<button
aria-label="Insert link"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink"
role="button"
2023-04-12 14:58:38 +01:00
tabindex="-1"
2022-12-09 10:37:25 +13:00
type="button"
/>
</div>
<div
aria-autocomplete="list"
aria-disabled="false"
aria-haspopup="listbox"
2025-08-07 13:25:34 +02:00
aria-label="Send an unencrypted message…"
2022-12-09 10:37:25 +13:00
aria-multiline="true"
class="mx_BasicMessageComposer_input mx_BasicMessageComposer_input_shouldShowPillAvatar mx_BasicMessageComposer_inputEmpty"
contenteditable="true"
data-testid="basicmessagecomposer"
dir="auto"
role="textbox"
2025-08-07 13:25:34 +02:00
style="--placeholder: 'Send\\ an\\ unencrypted\\ message…';"
2022-12-09 10:37:25 +13:00
tabindex="0"
2023-06-27 10:48:32 +02:00
translate="no"
2022-12-09 10:37:25 +13:00
>
<div>
<br />
</div>
</div>
</div>
</div>
<div
class="mx_MessageComposer_actions"
>
<div
aria-label="Emoji"
class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button mx_EmojiButton_icon"
role="button"
tabindex="0"
/>
<div
aria-label="Attachment"
class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload"
role="button"
tabindex="0"
/>
<div
aria-label="More options"
class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
role="button"
tabindex="0"
/>
<input
multiple=""
style="display: none;"
type="file"
/>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
`;
2023-06-19 17:08:16 +01:00
2025-04-08 10:08:00 +01:00
exports[`RoomView invites renders an invite room 1`] = `
<DocumentFragment>
<div
class="mx_RoomView"
>
<div
class="mx_RoomPreviewBar mx_RoomPreviewBar_Invite mx_RoomPreviewBar_dialog"
role="complementary"
>
<div
class="mx_RoomPreviewBar_message"
>
<h3>
Do you want to join !2:example.org?
</h3>
<p>
<span
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
data-color="4"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 36px;"
>
!
</span>
</p>
<p>
<span>
Invited by
<span
class="mx_RoomPreviewBar_inviter"
>
@bob:example.org
</span>
</span>
</p>
</div>
<div
class="mx_RoomPreviewBar_actions"
>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
role="button"
tabindex="0"
>
Accept
</div>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary"
role="button"
tabindex="0"
>
Decline
</div>
<button
class="_button_vczzf_8 _destructive_vczzf_107"
data-kind="tertiary"
data-size="lg"
role="button"
tabindex="0"
>
Decline and block
</button>
</div>
<div
class="mx_RoomPreviewBar_footer"
/>
</div>
</div>
</DocumentFragment>
`;
2024-11-26 22:34:32 +01:00
exports[`RoomView should not display the timeline when the room encryption is loading 1`] = `
<DocumentFragment>
<div
class="mx_RoomView"
>
<canvas
aria-hidden="true"
height="768"
style="display: block; z-index: 999999; pointer-events: none; position: fixed; top: 0px; right: 0px;"
width="0"
/>
<div
class="mx_MainSplit"
>
<div
class="mx_RoomView_body mx_MainSplit_timeline"
data-layout="group"
>
<header
2025-07-22 18:25:45 +02:00
class="flex mx_RoomHeader light-panel"
2025-03-13 14:32:48 +01:00
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
2024-11-26 22:34:32 +01:00
>
<button
aria-label="Open room settings"
aria-live="off"
2025-02-24 18:08:12 +01:00
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
2025-06-04 23:09:19 +05:30
data-color="5"
2024-11-26 22:34:32 +01:00
data-testid="avatar-img"
data-type="round"
role="button"
style="--cpd-avatar-size: 40px;"
tabindex="-1"
>
!
</button>
<button
aria-label="Room info"
class="mx_RoomHeader_infoWrapper"
tabindex="0"
>
<div
2025-07-22 18:25:45 +02:00
class="mx_RoomHeader_info box-flex"
2024-11-26 22:34:32 +01:00
style="--mx-box-flex: 1;"
>
<div
aria-level="1"
2025-02-24 18:08:12 +01:00
class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 mx_RoomHeader_heading"
2024-11-26 22:34:32 +01:00
dir="auto"
role="heading"
>
<span
class="mx_RoomHeader_truncated mx_lineClamp"
>
2025-06-04 23:09:19 +05:30
!12:example.org
2024-11-26 22:34:32 +01:00
</span>
</div>
</div>
</button>
2024-12-18 09:55:59 +00:00
<button
2025-08-12 12:07:59 +02:00
aria-disabled="false"
aria-label="Video call"
2025-06-13 10:28:43 +02:00
class="_icon-button_1pz9o_8"
data-kind="primary"
2024-12-18 09:55:59 +00:00
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
2024-11-26 22:34:32 +01:00
>
2024-12-18 09:55:59 +00:00
<div
2025-02-24 18:08:12 +01:00
class="_indicator-icon_zr2a0_17"
2025-08-12 12:07:59 +02:00
style="--cpd-icon-button-size: 100%;"
2024-11-26 22:34:32 +01:00
>
2024-12-18 09:55:59 +00:00
<svg
2025-08-26 17:29:41 +02:00
aria-labelledby="«r2i»"
2024-12-18 09:55:59 +00:00
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
2024-11-26 22:34:32 +01:00
>
2024-12-18 09:55:59 +00:00
<path
2025-02-24 18:08:12 +01:00
d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4"
2024-12-18 09:55:59 +00:00
/>
</svg>
</div>
</button>
<button
2025-08-12 12:07:59 +02:00
aria-disabled="false"
aria-label="Voice call"
2025-08-26 17:29:41 +02:00
aria-labelledby="«r2n»"
2025-06-13 10:28:43 +02:00
class="_icon-button_1pz9o_8"
data-kind="primary"
2024-12-18 09:55:59 +00:00
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
2025-02-24 18:08:12 +01:00
class="_indicator-icon_zr2a0_17"
2025-08-12 12:07:59 +02:00
style="--cpd-icon-button-size: 100%;"
2024-11-26 22:34:32 +01:00
>
2024-12-18 09:55:59 +00:00
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
2024-11-26 22:34:32 +01:00
>
2024-12-18 09:55:59 +00:00
<path
2025-02-24 18:08:12 +01:00
d="m20.958 16.374.039 3.527q0 .427-.33.756-.33.33-.756.33a16 16 0 0 1-6.57-1.105 16.2 16.2 0 0 1-5.563-3.663 16.1 16.1 0 0 1-3.653-5.573 16.3 16.3 0 0 1-1.115-6.56q0-.427.33-.757T4.095 3l3.528.039a1.07 1.07 0 0 1 1.085.93l.543 3.954q.039.271-.039.504a1.1 1.1 0 0 1-.271.426l-1.64 1.64q.505 1.008 1.154 1.909c.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444q.9.65 1.909 1.153l1.64-1.64q.193-.193.426-.27t.504-.04l3.954.543q.406.059.668.359t.262.727"
2024-12-18 09:55:59 +00:00
/>
</svg>
</div>
</button>
<button
aria-label="Threads"
2025-08-26 17:29:41 +02:00
aria-labelledby="«r2s»"
2025-06-13 10:28:43 +02:00
class="_icon-button_1pz9o_8"
data-kind="primary"
2024-12-18 09:55:59 +00:00
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
2025-02-24 18:08:12 +01:00
class="_indicator-icon_zr2a0_17"
2024-12-18 09:55:59 +00:00
style="--cpd-icon-button-size: 100%;"
2024-11-26 22:34:32 +01:00
>
2024-12-18 09:55:59 +00:00
<svg
2025-01-27 20:35:46 +05:30
class=""
2024-12-18 09:55:59 +00:00
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
2024-11-26 22:34:32 +01:00
>
2024-12-18 09:55:59 +00:00
<path
2025-02-24 18:08:12 +01:00
d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2m3 7h10q.424 0 .712-.287A.97.97 0 0 0 18 9a.97.97 0 0 0-.288-.713A.97.97 0 0 0 17 8H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 9q0 .424.287.713Q6.576 10 7 10m0 4h6q.424 0 .713-.287A.97.97 0 0 0 14 13a.97.97 0 0 0-.287-.713A.97.97 0 0 0 13 12H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 13q0 .424.287.713Q6.576 14 7 14"
2024-12-18 09:55:59 +00:00
/>
</svg>
</div>
</button>
<button
aria-label="Room info"
2025-08-26 17:29:41 +02:00
aria-labelledby="«r31»"
2025-06-13 10:28:43 +02:00
class="_icon-button_1pz9o_8"
data-kind="primary"
2024-12-18 09:55:59 +00:00
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
2025-02-24 18:08:12 +01:00
class="_indicator-icon_zr2a0_17"
2024-12-18 09:55:59 +00:00
style="--cpd-icon-button-size: 100%;"
2024-11-26 22:34:32 +01:00
>
2024-12-18 09:55:59 +00:00
<svg
2025-01-27 20:35:46 +05:30
class=""
2024-12-18 09:55:59 +00:00
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
2024-11-26 22:34:32 +01:00
>
2024-12-18 09:55:59 +00:00
<path
2025-02-24 18:08:12 +01:00
d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16v-4a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 11a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 12v4q0 .424.287.712.288.288.713.288m0-8q.424 0 .713-.287A.97.97 0 0 0 13 8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8q0 .424.287.713Q11.576 9 12 9m0 13a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
2024-12-18 09:55:59 +00:00
/>
</svg>
</div>
</button>
2024-11-26 22:34:32 +01:00
<div
2025-02-24 18:08:12 +01:00
class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41"
2024-11-26 22:34:32 +01:00
>
<div
aria-label="0 members"
2025-08-26 17:29:41 +02:00
aria-labelledby="«r36»"
2024-11-26 22:34:32 +01:00
class="mx_AccessibleButton mx_FacePile"
role="button"
tabindex="0"
>
<div
2025-02-24 18:08:12 +01:00
class="_stacked-avatars_1qbcf_102"
2024-11-26 22:34:32 +01:00
/>
0
</div>
</div>
</header>
<div
class="mx_AutoHideScrollbar mx_AuxPanel"
role="region"
tabindex="-1"
>
<div />
</div>
<main
class="mx_RoomView_timeline mx_RoomView_timeline_rr_enabled"
/>
<div
aria-label="Room status bar"
class="mx_RoomView_statusArea"
role="region"
>
<div
class="mx_RoomView_statusAreaBox"
>
<div
class="mx_RoomView_statusAreaBox_line"
/>
</div>
</div>
</div>
</div>
</div>
</DocumentFragment>
`;
exports[`RoomView should not display the timeline when the room encryption is loading 2`] = `
<DocumentFragment>
<div
class="mx_RoomView"
>
<canvas
aria-hidden="true"
height="768"
style="display: block; z-index: 999999; pointer-events: none; position: fixed; top: 0px; right: 0px;"
width="0"
/>
<div
class="mx_MainSplit"
>
<div
class="mx_RoomView_body mx_MainSplit_timeline"
data-layout="group"
>
<header
2025-07-22 18:25:45 +02:00
class="flex mx_RoomHeader light-panel"
2025-03-13 14:32:48 +01:00
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
2024-11-26 22:34:32 +01:00
>
<button
aria-label="Open room settings"
aria-live="off"
2025-02-24 18:08:12 +01:00
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
2025-06-04 23:09:19 +05:30
data-color="5"
2024-11-26 22:34:32 +01:00
data-testid="avatar-img"
data-type="round"
role="button"
style="--cpd-avatar-size: 40px;"
tabindex="-1"
>
!
</button>
<button
aria-label="Room info"
class="mx_RoomHeader_infoWrapper"
tabindex="0"
>
<div
2025-07-22 18:25:45 +02:00
class="mx_RoomHeader_info box-flex"
2024-11-26 22:34:32 +01:00
style="--mx-box-flex: 1;"
>
<div
aria-level="1"
2025-02-24 18:08:12 +01:00
class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 mx_RoomHeader_heading"
2024-11-26 22:34:32 +01:00
dir="auto"
role="heading"
>
<span
class="mx_RoomHeader_truncated mx_lineClamp"
>
2025-06-04 23:09:19 +05:30
!12:example.org
2024-11-26 22:34:32 +01:00
</span>
</div>
</div>
</button>
2024-12-18 09:55:59 +00:00
<button
2025-08-12 12:07:59 +02:00
aria-disabled="false"
aria-label="Video call"
2025-06-13 10:28:43 +02:00
class="_icon-button_1pz9o_8"
data-kind="primary"
2024-12-18 09:55:59 +00:00
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
2024-11-26 22:34:32 +01:00
>
2024-12-18 09:55:59 +00:00
<div
2025-02-24 18:08:12 +01:00
class="_indicator-icon_zr2a0_17"
2025-08-12 12:07:59 +02:00
style="--cpd-icon-button-size: 100%;"
2024-11-26 22:34:32 +01:00
>
2024-12-18 09:55:59 +00:00
<svg
2025-08-26 17:29:41 +02:00
aria-labelledby="«r2i»"
2024-12-18 09:55:59 +00:00
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
2024-11-26 22:34:32 +01:00
>
2024-12-18 09:55:59 +00:00
<path
2025-02-24 18:08:12 +01:00
d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4"
2024-12-18 09:55:59 +00:00
/>
</svg>
</div>
</button>
<button
2025-08-12 12:07:59 +02:00
aria-disabled="false"
aria-label="Voice call"
2025-08-26 17:29:41 +02:00
aria-labelledby="«r2n»"
2025-06-13 10:28:43 +02:00
class="_icon-button_1pz9o_8"
data-kind="primary"
2024-12-18 09:55:59 +00:00
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
2025-02-24 18:08:12 +01:00
class="_indicator-icon_zr2a0_17"
2025-08-12 12:07:59 +02:00
style="--cpd-icon-button-size: 100%;"
2024-11-26 22:34:32 +01:00
>
2024-12-18 09:55:59 +00:00
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
2024-11-26 22:34:32 +01:00
>
2024-12-18 09:55:59 +00:00
<path
2025-02-24 18:08:12 +01:00
d="m20.958 16.374.039 3.527q0 .427-.33.756-.33.33-.756.33a16 16 0 0 1-6.57-1.105 16.2 16.2 0 0 1-5.563-3.663 16.1 16.1 0 0 1-3.653-5.573 16.3 16.3 0 0 1-1.115-6.56q0-.427.33-.757T4.095 3l3.528.039a1.07 1.07 0 0 1 1.085.93l.543 3.954q.039.271-.039.504a1.1 1.1 0 0 1-.271.426l-1.64 1.64q.505 1.008 1.154 1.909c.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444q.9.65 1.909 1.153l1.64-1.64q.193-.193.426-.27t.504-.04l3.954.543q.406.059.668.359t.262.727"
2024-12-18 09:55:59 +00:00
/>
</svg>
</div>
</button>
<button
aria-label="Threads"
2025-08-26 17:29:41 +02:00
aria-labelledby="«r2s»"
2025-06-13 10:28:43 +02:00
class="_icon-button_1pz9o_8"
data-kind="primary"
2024-12-18 09:55:59 +00:00
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
2025-02-24 18:08:12 +01:00
class="_indicator-icon_zr2a0_17"
2024-12-18 09:55:59 +00:00
style="--cpd-icon-button-size: 100%;"
2024-11-26 22:34:32 +01:00
>
2024-12-18 09:55:59 +00:00
<svg
2025-01-27 20:35:46 +05:30
class=""
2024-12-18 09:55:59 +00:00
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
2024-11-26 22:34:32 +01:00
>
2024-12-18 09:55:59 +00:00
<path
2025-02-24 18:08:12 +01:00
d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2m3 7h10q.424 0 .712-.287A.97.97 0 0 0 18 9a.97.97 0 0 0-.288-.713A.97.97 0 0 0 17 8H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 9q0 .424.287.713Q6.576 10 7 10m0 4h6q.424 0 .713-.287A.97.97 0 0 0 14 13a.97.97 0 0 0-.287-.713A.97.97 0 0 0 13 12H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 13q0 .424.287.713Q6.576 14 7 14"
2024-12-18 09:55:59 +00:00
/>
</svg>
</div>
</button>
<button
aria-label="Room info"
2025-08-26 17:29:41 +02:00
aria-labelledby="«r31»"
2025-06-13 10:28:43 +02:00
class="_icon-button_1pz9o_8"
data-kind="primary"
2024-12-18 09:55:59 +00:00
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
2025-02-24 18:08:12 +01:00
class="_indicator-icon_zr2a0_17"
2024-12-18 09:55:59 +00:00
style="--cpd-icon-button-size: 100%;"
2024-11-26 22:34:32 +01:00
>
2024-12-18 09:55:59 +00:00
<svg
2025-01-27 20:35:46 +05:30
class=""
2024-12-18 09:55:59 +00:00
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
2024-11-26 22:34:32 +01:00
>
2024-12-18 09:55:59 +00:00
<path
2025-02-24 18:08:12 +01:00
d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16v-4a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 11a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 12v4q0 .424.287.712.288.288.713.288m0-8q.424 0 .713-.287A.97.97 0 0 0 13 8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8q0 .424.287.713Q11.576 9 12 9m0 13a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
2024-12-18 09:55:59 +00:00
/>
</svg>
</div>
</button>
2024-11-26 22:34:32 +01:00
<div
2025-02-24 18:08:12 +01:00
class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41"
2024-11-26 22:34:32 +01:00
>
<div
aria-label="0 members"
2025-08-26 17:29:41 +02:00
aria-labelledby="«r36»"
2024-11-26 22:34:32 +01:00
class="mx_AccessibleButton mx_FacePile"
role="button"
tabindex="0"
>
<div
2025-02-24 18:08:12 +01:00
class="_stacked-avatars_1qbcf_102"
2024-11-26 22:34:32 +01:00
/>
0
</div>
</div>
</header>
<div
class="mx_AutoHideScrollbar mx_AuxPanel"
role="region"
tabindex="-1"
>
<div />
</div>
<main
class="mx_RoomView_timeline mx_RoomView_timeline_rr_enabled"
>
<div
class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
tabindex="-1"
>
<div
class="mx_RoomView_messageListWrapper"
>
<ol
aria-live="polite"
class="mx_RoomView_MessageList"
style="height: 400px;"
/>
</div>
</div>
</main>
<div
aria-label="Room status bar"
class="mx_RoomView_statusArea"
role="region"
>
<div
class="mx_RoomView_statusAreaBox"
>
<div
class="mx_RoomView_statusAreaBox_line"
/>
</div>
</div>
<div
aria-label="Message composer"
class="mx_MessageComposer mx_MessageComposer_e2eStatus"
role="region"
>
<div
class="mx_MessageComposer_wrapper"
>
<div
class="mx_MessageComposer_row"
>
<div
class="mx_MessageComposer_e2eIconWrapper"
>
<span
tabindex="0"
>
<div
2025-08-26 17:29:41 +02:00
aria-labelledby="«r3k»"
2024-11-26 22:34:32 +01:00
class="mx_E2EIcon mx_E2EIcon_verified mx_MessageComposer_e2eIcon"
2025-08-11 10:35:04 +01:00
data-testid="e2e-icon"
2025-07-07 13:35:03 +02:00
>
<div
class="mx_E2EIcon_normal"
/>
</div>
2024-11-26 22:34:32 +01:00
</span>
</div>
<div
class="mx_SendMessageComposer"
>
<div
class="mx_BasicMessageComposer"
>
<div
aria-label="Formatting"
class="mx_MessageComposerFormatBar"
role="toolbar"
>
<button
aria-label="Bold"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconBold"
role="button"
tabindex="0"
type="button"
/>
<button
aria-label="Italics"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic"
role="button"
tabindex="-1"
type="button"
/>
<button
aria-label="Strikethrough"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough"
role="button"
tabindex="-1"
type="button"
/>
<button
aria-label="Code block"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode"
role="button"
tabindex="-1"
type="button"
/>
<button
aria-label="Quote"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote"
role="button"
tabindex="-1"
type="button"
/>
<button
aria-label="Insert link"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink"
role="button"
tabindex="-1"
type="button"
/>
</div>
<div
aria-autocomplete="list"
aria-disabled="false"
aria-haspopup="listbox"
2025-08-07 13:25:34 +02:00
aria-label="Send a message…"
2024-11-26 22:34:32 +01:00
aria-multiline="true"
class="mx_BasicMessageComposer_input mx_BasicMessageComposer_input_shouldShowPillAvatar mx_BasicMessageComposer_inputEmpty"
contenteditable="true"
data-testid="basicmessagecomposer"
dir="auto"
role="textbox"
2025-08-07 13:25:34 +02:00
style="--placeholder: 'Send\\ a\\ message…';"
2024-11-26 22:34:32 +01:00
tabindex="0"
translate="no"
>
<div>
<br />
</div>
</div>
</div>
</div>
<div
class="mx_MessageComposer_actions"
>
<div
aria-label="Emoji"
class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button mx_EmojiButton_icon"
role="button"
tabindex="0"
/>
<div
aria-label="Attachment"
class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload"
role="button"
tabindex="0"
/>
<div
aria-label="More options"
class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
role="button"
tabindex="0"
/>
<input
multiple=""
style="display: none;"
type="file"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</DocumentFragment>
`;
2023-06-19 17:08:16 +01:00
exports[`RoomView should show error view if failed to look up room alias 1`] = `
<DocumentFragment>
<div
class="mx_RoomView"
>
<div
2023-10-20 14:30:37 +01:00
class="mx_RoomPreviewBar mx_RoomPreviewBar_RoomNotFound mx_RoomPreviewBar_dialog"
2023-12-20 15:32:24 +00:00
role="complementary"
2023-06-19 17:08:16 +01:00
>
<div
class="mx_RoomPreviewBar_message"
>
<h3>
#addy:server does not exist.
</h3>
<p>
Are you sure you're at the right place?
</p>
</div>
<div
class="mx_RoomPreviewBar_actions"
/>
<div
class="mx_RoomPreviewBar_footer"
/>
</div>
</div>
</DocumentFragment>
`;
2024-10-04 10:41:00 +01:00
exports[`RoomView video rooms should render joined video room view 1`] = `
<DocumentFragment>
<div
class="mx_RoomView mx_RoomView_immersive"
>
<canvas
aria-hidden="true"
height="768"
style="display: block; z-index: 999999; pointer-events: none; position: fixed; top: 0px; right: 0px;"
width="0"
/>
<div
class="mx_MainSplit"
>
<div
class="mx_RoomView_body mx_MainSplit_call"
data-layout="group"
>
<header
2025-07-22 18:25:45 +02:00
class="flex mx_RoomHeader light-panel"
2025-03-13 14:32:48 +01:00
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
2024-10-04 10:41:00 +01:00
>
<button
aria-label="Open room settings"
aria-live="off"
2025-02-24 18:08:12 +01:00
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
2025-06-04 23:09:19 +05:30
data-color="4"
2024-10-04 10:41:00 +01:00
data-testid="avatar-img"
data-type="round"
role="button"
style="--cpd-avatar-size: 40px;"
tabindex="-1"
>
!
</button>
<button
aria-label="Room info"
class="mx_RoomHeader_infoWrapper"
tabindex="0"
>
<div
2025-07-22 18:25:45 +02:00
class="mx_RoomHeader_info box-flex"
2024-10-04 10:41:00 +01:00
style="--mx-box-flex: 1;"
>
<div
aria-level="1"
2025-02-24 18:08:12 +01:00
class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 mx_RoomHeader_heading"
2024-10-04 10:41:00 +01:00
dir="auto"
role="heading"
>
<span
class="mx_RoomHeader_truncated mx_lineClamp"
>
2025-06-04 23:09:19 +05:30
!17:example.org
2024-10-04 10:41:00 +01:00
</span>
</div>
</div>
</button>
2024-12-18 09:55:59 +00:00
<button
aria-label="Chat"
2025-08-26 17:29:41 +02:00
aria-labelledby="«r7i»"
2025-06-13 10:28:43 +02:00
class="_icon-button_1pz9o_8"
data-kind="primary"
2024-12-18 09:55:59 +00:00
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
2024-10-04 10:41:00 +01:00
>
2024-12-18 09:55:59 +00:00
<div
2025-02-24 18:08:12 +01:00
class="_indicator-icon_zr2a0_17"
2024-12-18 09:55:59 +00:00
style="--cpd-icon-button-size: 100%;"
2024-10-04 10:41:00 +01:00
>
2024-12-18 09:55:59 +00:00
<svg
2025-01-27 20:35:46 +05:30
class="mx_RoomHeader_toggled"
2024-12-18 09:55:59 +00:00
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
2024-10-04 10:41:00 +01:00
>
2024-12-18 09:55:59 +00:00
<path
2025-02-24 18:08:12 +01:00
d="M2.95 16.3 1.5 21.25a.94.94 0 0 0 .25 1 .94.94 0 0 0 1 .25l4.95-1.45a10.2 10.2 0 0 0 2.1.712Q10.875 22 12 22a9.7 9.7 0 0 0 3.9-.788 10.1 10.1 0 0 0 3.175-2.137q1.35-1.35 2.137-3.175A9.7 9.7 0 0 0 22 12a9.7 9.7 0 0 0-.788-3.9 10.1 10.1 0 0 0-2.137-3.175q-1.35-1.35-3.175-2.137A9.7 9.7 0 0 0 12 2a9.7 9.7 0 0 0-3.9.788 10.1 10.1 0 0 0-3.175 2.137Q3.575 6.275 2.788 8.1A9.7 9.7 0 0 0 2 12q0 1.125.238 2.2.237 1.076.712 2.1"
2024-12-18 09:55:59 +00:00
/>
</svg>
</div>
</button>
<button
aria-label="Threads"
2025-08-26 17:29:41 +02:00
aria-labelledby="«r7n»"
2025-06-13 10:28:43 +02:00
class="_icon-button_1pz9o_8"
data-kind="primary"
2024-12-18 09:55:59 +00:00
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
2025-02-24 18:08:12 +01:00
class="_indicator-icon_zr2a0_17"
2024-12-18 09:55:59 +00:00
style="--cpd-icon-button-size: 100%;"
2024-10-04 10:41:00 +01:00
>
2024-12-18 09:55:59 +00:00
<svg
2025-01-27 20:35:46 +05:30
class=""
2024-12-18 09:55:59 +00:00
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
2024-10-04 10:41:00 +01:00
>
2024-12-18 09:55:59 +00:00
<path
2025-02-24 18:08:12 +01:00
d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2m3 7h10q.424 0 .712-.287A.97.97 0 0 0 18 9a.97.97 0 0 0-.288-.713A.97.97 0 0 0 17 8H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 9q0 .424.287.713Q6.576 10 7 10m0 4h6q.424 0 .713-.287A.97.97 0 0 0 14 13a.97.97 0 0 0-.287-.713A.97.97 0 0 0 13 12H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 13q0 .424.287.713Q6.576 14 7 14"
2024-12-18 09:55:59 +00:00
/>
</svg>
</div>
</button>
<button
aria-label="Room info"
2025-08-26 17:29:41 +02:00
aria-labelledby="«r7s»"
2025-06-13 10:28:43 +02:00
class="_icon-button_1pz9o_8"
data-kind="primary"
2024-12-18 09:55:59 +00:00
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
2025-02-24 18:08:12 +01:00
class="_indicator-icon_zr2a0_17"
2024-12-18 09:55:59 +00:00
style="--cpd-icon-button-size: 100%;"
2024-10-04 10:41:00 +01:00
>
2024-12-18 09:55:59 +00:00
<svg
2025-01-27 20:35:46 +05:30
class=""
2024-12-18 09:55:59 +00:00
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
2024-10-04 10:41:00 +01:00
>
2024-12-18 09:55:59 +00:00
<path
2025-02-24 18:08:12 +01:00
d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16v-4a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 11a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 12v4q0 .424.287.712.288.288.713.288m0-8q.424 0 .713-.287A.97.97 0 0 0 13 8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8q0 .424.287.713Q11.576 9 12 9m0 13a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
2024-12-18 09:55:59 +00:00
/>
</svg>
</div>
</button>
2024-10-04 10:41:00 +01:00
<div
2025-02-24 18:08:12 +01:00
class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41"
2024-10-04 10:41:00 +01:00
>
<div
aria-label="0 members"
2025-08-26 17:29:41 +02:00
aria-labelledby="«r81»"
2024-10-04 10:41:00 +01:00
class="mx_AccessibleButton mx_FacePile"
role="button"
tabindex="0"
>
<div
2025-02-24 18:08:12 +01:00
class="_stacked-avatars_1qbcf_102"
2024-10-04 10:41:00 +01:00
/>
0
</div>
</div>
</header>
2025-03-05 15:41:26 -05:00
<div
class="mx_CallView"
role="main"
>
<div
class="mx_AppTile"
id="vY7Q4uEh9K38QgU2PomxwKpa"
>
<div
class="mx_AppTileBody mx_AppTileBody--large mx_AppTileBody--loading mx_AppTileBody--call"
>
<div
class="mx_AppTileBody_fadeInSpinner"
>
<div
class="mx_Spinner"
>
<div
class="mx_Spinner_Msg"
>
Loading…
</div>
<div
aria-label="Loading…"
class="mx_Spinner_icon"
data-testid="spinner"
role="progressbar"
style="width: 32px; height: 32px;"
/>
</div>
</div>
</div>
</div>
</div>
2024-10-04 10:41:00 +01:00
</div>
<div
class="mx_RightPanel_ResizeWrapper"
2025-01-08 22:45:06 +05:30
style="position: relative; user-select: auto; width: 420px; height: 100%; max-width: 50%; min-width: 320px; box-sizing: border-box; flex-shrink: 0;"
2024-10-04 10:41:00 +01:00
>
<aside
2025-08-14 10:59:42 +02:00
aria-label="Right panel"
2024-10-04 10:41:00 +01:00
class="mx_RightPanel"
2025-05-14 18:22:32 +01:00
data-testid="right-panel"
2024-10-04 10:41:00 +01:00
id="mx_RightPanel"
2025-08-14 10:59:42 +02:00
tabindex="-1"
2024-10-04 10:41:00 +01:00
>
<div
class="mx_BaseCard mx_ThreadPanel mx_TimelineCard"
>
<div
class="mx_BaseCard_header"
>
<div
class="mx_BaseCard_header_title"
>
<p
2025-02-24 18:08:12 +01:00
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 mx_BaseCard_header_title_heading"
2024-10-04 10:41:00 +01:00
role="heading"
>
Chat
</p>
</div>
<button
2025-08-26 17:29:41 +02:00
aria-labelledby="«r8a»"
2025-06-13 10:28:43 +02:00
class="_icon-button_1pz9o_8"
data-kind="secondary"
2024-10-04 10:41:00 +01:00
data-testid="base-card-close-button"
role="button"
style="--cpd-icon-button-size: 28px;"
tabindex="0"
>
<div
2025-02-24 18:08:12 +01:00
class="_indicator-icon_zr2a0_17"
2024-10-04 10:41:00 +01:00
style="--cpd-icon-button-size: 100%;"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
2025-02-24 18:08:12 +01:00
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
2024-10-04 10:41:00 +01:00
/>
</svg>
</div>
</button>
</div>
<div
class="mx_TimelineCard_timeline"
>
<div
class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
tabindex="-1"
>
<div
class="mx_RoomView_messageListWrapper"
>
<ol
aria-live="polite"
class="mx_RoomView_MessageList"
style="height: 400px;"
/>
</div>
</div>
</div>
<div
aria-label="Message composer"
2025-08-11 10:35:04 +01:00
class="mx_MessageComposer mx_MessageComposer--compact mx_MessageComposer_e2eStatus"
2024-10-04 10:41:00 +01:00
role="region"
>
<div
class="mx_MessageComposer_wrapper"
>
<div
class="mx_MessageComposer_row"
>
2025-08-11 10:35:04 +01:00
<div
class="mx_MessageComposer_e2eIconWrapper"
>
<svg
2025-08-26 17:29:41 +02:00
aria-label="Messages in this room are not end-to-end encrypted"
aria-labelledby="«r8j»"
2025-08-11 10:35:04 +01:00
class="mx_E2EIcon mx_MessageComposer_e2eIcon"
color="var(--cpd-color-icon-info-primary)"
fill="currentColor"
height="12"
viewBox="0 0 24 24"
width="12"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 22q-.825 0-1.412-.587A1.93 1.93 0 0 1 4 20V10q0-.825.588-1.412a2 2 0 0 1 .702-.463L1.333 4.167a1 1 0 0 1 1.414-1.414L7 7.006v-.012l13 13v.012l1.247 1.247a1 1 0 1 1-1.414 1.414l-.896-.896A1.94 1.94 0 0 1 18 22zm14-4.834V10q0-.825-.587-1.412A1.93 1.93 0 0 0 18 8h-1V6q0-2.075-1.463-3.537Q14.075 1 12 1T8.463 2.463a4.9 4.9 0 0 0-1.22 1.946L9 6.166V6q0-1.25.875-2.125A2.9 2.9 0 0 1 12 3q1.25 0 2.125.875T15 6v2h-4.166z"
/>
</svg>
</div>
2024-10-04 10:41:00 +01:00
<div
class="mx_SendMessageComposer"
>
<div
class="mx_BasicMessageComposer"
>
<div
aria-label="Formatting"
class="mx_MessageComposerFormatBar"
role="toolbar"
>
<button
aria-label="Bold"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconBold"
role="button"
tabindex="0"
type="button"
/>
<button
aria-label="Italics"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic"
role="button"
tabindex="-1"
type="button"
/>
<button
aria-label="Strikethrough"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough"
role="button"
tabindex="-1"
type="button"
/>
<button
aria-label="Code block"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode"
role="button"
tabindex="-1"
type="button"
/>
<button
aria-label="Quote"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote"
role="button"
tabindex="-1"
type="button"
/>
<button
aria-label="Insert link"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink"
role="button"
tabindex="-1"
type="button"
/>
</div>
<div
aria-autocomplete="list"
aria-disabled="false"
aria-haspopup="listbox"
2025-08-07 13:25:34 +02:00
aria-label="Send an unencrypted message…"
2024-10-04 10:41:00 +01:00
aria-multiline="true"
class="mx_BasicMessageComposer_input mx_BasicMessageComposer_input_shouldShowPillAvatar mx_BasicMessageComposer_inputEmpty"
contenteditable="true"
data-testid="basicmessagecomposer"
dir="auto"
role="textbox"
2025-08-07 13:25:34 +02:00
style="--placeholder: 'Send\\ an\\ unencrypted\\ message…';"
2024-10-04 10:41:00 +01:00
tabindex="0"
translate="no"
>
<div>
<br />
</div>
</div>
</div>
</div>
<div
class="mx_MessageComposer_actions"
>
<div
aria-label="Emoji"
class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button mx_EmojiButton_icon"
role="button"
tabindex="0"
/>
<div
aria-label="Attachment"
class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload"
role="button"
tabindex="0"
/>
<div
aria-label="More options"
class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
role="button"
tabindex="0"
/>
<input
multiple=""
style="display: none;"
type="file"
/>
</div>
</div>
</div>
</div>
</div>
</aside>
<div>
<div
class="mx_ResizeHandle--horizontal"
style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; left: -5px; cursor: col-resize;"
/>
</div>
</div>
</div>
</div>
</DocumentFragment>
`;
