From 6e6ed3c73cccf875ab9d7a2b86817454d92f3626 Mon Sep 17 00:00:00 2001
From: Marco <marcoambrosini@icloud.com>
Date: Fri, 10 Feb 2023 13:54:56 +0100
Subject: [PATCH 1/7] Display request for assistance and allow moderators to
 dismiss it

Signed-off-by: Marco <marcoambrosini@icloud.com>
---
 .../BreakoutRoomsEditor/BreakoutRoomsList.vue | 19 +++++++++++++++++++
 src/constants.js                              |  4 ++++
 2 files changed, 23 insertions(+)

diff --git a/src/components/BreakoutRoomsEditor/BreakoutRoomsList.vue b/src/components/BreakoutRoomsEditor/BreakoutRoomsList.vue
index a407f4828c..a83bd5a7d6 100644
--- a/src/components/BreakoutRoomsEditor/BreakoutRoomsList.vue
+++ b/src/components/BreakoutRoomsEditor/BreakoutRoomsList.vue
@@ -26,12 +26,21 @@
 				class="breakout-rooms__room"
 				:title="breakoutRoom.displayName"
 				:allow-collapse="true"
+				:inline-actions="1"
 				:open="true">
 				<template #icon>
 					<!-- TODO: choose final icon -->
 					<GoogleCircles :size="20" />
 				</template>
 				<template #actions>
+					<NcActionButton v-if="breakoutRoom.breakoutRoomStatus ===
+							CONVERSATION.BREAKOUT_ROOM_STATUS.STATUS_ASSISTANCE_REQUESTED"
+						@click="dismissRequestAssistance(breakoutRoom.token)">
+						<template #icon>
+							<HandBackLeft :size="16" />
+						</template>
+						{{ t('spreed', 'Dismiss request for assistance') }}
+					</NcActionButton>
 					<NcActionButton @click="openSendMessageForm(breakoutRoom.token)">
 						<template #icon>
 							<Send :size="16" />
@@ -62,8 +71,12 @@ import SendMessageDialog from './SendMessageDialog.vue'
 
 // Icons
 import GoogleCircles from 'vue-material-design-icons/GoogleCircles.vue'
+import HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'
 import Send from 'vue-material-design-icons/Send.vue'
 
+// Constants
+import { CONVERSATION } from '../../constants.js'
+
 export default {
 	name: 'BreakoutRoomsList',
 
@@ -76,6 +89,7 @@ export default {
 
 		// Icons
 		GoogleCircles,
+		HandBackLeft,
 		Send,
 	},
 
@@ -89,6 +103,7 @@ export default {
 	data() {
 		return {
 			openedDialog: undefined,
+			CONVERSATION,
 		}
 	},
 
@@ -100,6 +115,10 @@ export default {
 		closeSendMessageForm() {
 			this.openedDialog = undefined
 		},
+
+		dismissRequestAssistance(token) {
+			this.$store.dispatch('resetRequestAssistanceAction', { token })
+		},
 	},
 }
 </script>
diff --git a/src/constants.js b/src/constants.js
index 42320d329c..ca6c90f902 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -71,8 +71,12 @@ export const CONVERSATION = {
 	},
 
 	BREAKOUT_ROOM_STATUS: {
+		// Main room
 		STOPPED: 0,
 		STARTED: 1,
+		// Breakout rooms
+		STATUS_ASSISTANCE_RESET: 0,
+		STATUS_ASSISTANCE_REQUESTED: 2,
 	},
 }
 export const ATTENDEE = {

From 0ea9ddffda9d9ebbc291fb227730c37787b08dca Mon Sep 17 00:00:00 2001
From: Marco <marcoambrosini@icloud.com>
Date: Fri, 10 Feb 2023 14:17:43 +0100
Subject: [PATCH 2/7] Replace BreakoutRoomsList.vue with BreakoutRoomItem.vue

Signed-off-by: Marco <marcoambrosini@icloud.com>
---
 .../BreakoutRooms/BreakoutRoomItem.vue}       | 87 +++++++++----------
 .../BreakoutRooms/BreakoutRoomsTab.vue        | 11 ++-
 2 files changed, 48 insertions(+), 50 deletions(-)
 rename src/components/{BreakoutRoomsEditor/BreakoutRoomsList.vue => RightSidebar/BreakoutRooms/BreakoutRoomItem.vue} (51%)

diff --git a/src/components/BreakoutRoomsEditor/BreakoutRoomsList.vue b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue
similarity index 51%
rename from src/components/BreakoutRoomsEditor/BreakoutRoomsList.vue
rename to src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue
index a83bd5a7d6..15e8ef9101 100644
--- a/src/components/BreakoutRoomsEditor/BreakoutRoomsList.vue
+++ b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue
@@ -1,7 +1,8 @@
 <!--
-  - @copyright Copyright (c) 2023 Marco Ambrosini <marcoambrosini@icloud.com>
+  - @copyright Copyright (c) 2022 Marco Ambrosini <marcoambrosini@icloud.com>
   -
   - @author Marco Ambrosini <marcoambrosini@icloud.com>
+  - @author Maksim Sukharev <antreesy.web@gmail.com>
   -
   - @license GNU AGPL version 3 or any later version
   -
@@ -20,65 +21,57 @@
 -->
 
 <template>
-	<div>
-		<template v-for="breakoutRoom in breakoutRooms">
-			<NcAppNavigationItem :key="breakoutRoom.displayName"
-				class="breakout-rooms__room"
-				:title="breakoutRoom.displayName"
-				:allow-collapse="true"
-				:inline-actions="1"
-				:open="true">
+	<NcAppNavigationItem :key="breakoutRoom.displayName"
+		class="breakout-rooms__room"
+		:title="breakoutRoom.displayName"
+		:allow-collapse="true"
+		:inline-actions="1"
+		:open="true">
+		<template #icon>
+			<!-- TODO: choose final icon -->
+			<GoogleCircles :size="20" />
+		</template>
+		<template #actions>
+			<NcActionButton v-if="breakoutRoom.breakoutRoomStatus ===
+					CONVERSATION.BREAKOUT_ROOM_STATUS.STATUS_ASSISTANCE_REQUESTED"
+				@click="dismissRequestAssistance(breakoutRoom.token)">
 				<template #icon>
-					<!-- TODO: choose final icon -->
-					<GoogleCircles :size="20" />
-				</template>
-				<template #actions>
-					<NcActionButton v-if="breakoutRoom.breakoutRoomStatus ===
-							CONVERSATION.BREAKOUT_ROOM_STATUS.STATUS_ASSISTANCE_REQUESTED"
-						@click="dismissRequestAssistance(breakoutRoom.token)">
-						<template #icon>
-							<HandBackLeft :size="16" />
-						</template>
-						{{ t('spreed', 'Dismiss request for assistance') }}
-					</NcActionButton>
-					<NcActionButton @click="openSendMessageForm(breakoutRoom.token)">
-						<template #icon>
-							<Send :size="16" />
-						</template>
-						{{ t('spreed', 'Send message to room') }}
-					</NcActionButton>
+					<HandBackLeft :size="16" />
 				</template>
-				<!-- Send message dialog -->
-				<SendMessageDialog v-if="openedDialog === breakoutRoom.token"
-					:display-name="breakoutRoom.displayName"
-					:token="breakoutRoom.token"
-					@close="closeSendMessageForm(breakoutRoom.token)" />
-				<template v-for="participant in $store.getters.participantsList(breakoutRoom.token)">
-					<Participant :key="participant.actorId" :participant="participant" />
+				{{ t('spreed', 'Dismiss request for assistance') }}
+			</NcActionButton>
+			<NcActionButton @click="openSendMessageForm(breakoutRoom.token)">
+				<template #icon>
+					<Send :size="16" />
 				</template>
-			</NcAppNavigationItem>
+				{{ t('spreed', 'Send message to room') }}
+			</NcActionButton>
 		</template>
-	</div>
+		<!-- Send message dialog -->
+		<SendMessageDialog v-if="openedDialog === breakoutRoom.token"
+			:display-name="breakoutRoom.displayName"
+			:token="breakoutRoom.token"
+			@close="closeSendMessageForm(breakoutRoom.token)" />
+		<template v-for="participant in $store.getters.participantsList(breakoutRoom.token)">
+			<Participant :key="participant.actorId" :participant="participant" />
+		</template>
+	</NcAppNavigationItem>
 </template>
 
 <script>
-
-// Components
 import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
-import Participant from '../RightSidebar/Participants/ParticipantsList/Participant/Participant.vue'
+import Participant from '../Participants/ParticipantsList/Participant/Participant.vue'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
-import SendMessageDialog from './SendMessageDialog.vue'
-
-// Icons
+import SendMessageDialog from '../../BreakoutRoomsEditor/SendMessageDialog.vue'
 import GoogleCircles from 'vue-material-design-icons/GoogleCircles.vue'
 import HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'
 import Send from 'vue-material-design-icons/Send.vue'
 
 // Constants
-import { CONVERSATION } from '../../constants.js'
+import { CONVERSATION } from '../../../constants.js'
 
 export default {
-	name: 'BreakoutRoomsList',
+	name: 'BreakoutRoomItem',
 
 	components: {
 		// Components
@@ -94,8 +87,8 @@ export default {
 	},
 
 	props: {
-		breakoutRooms: {
-			type: Array,
+		breakoutRoom: {
+			type: Object,
 			required: true,
 		},
 	},
@@ -123,6 +116,6 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 
 </style>
diff --git a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsTab.vue b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsTab.vue
index 5e139b2a82..76af64346d 100644
--- a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsTab.vue
+++ b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsTab.vue
@@ -79,7 +79,12 @@
 
 		<template v-if="breakoutRoomsConfigured">
 			<!-- Breakout rooms list -->
-			<BreakoutRoomsList v-if="breakoutRooms" :breakout-rooms="breakoutRooms" />
+			<ul v-if="breakoutRooms">
+				<template v-for="breakoutRoom in breakoutRooms">
+					<BreakoutRoomItem :key="breakoutRoom.token"
+						:breakout-room="breakoutRoom" />
+				</template>
+			</ul>
 
 			<!-- Breakout rooms editor -->
 			<BreakoutRoomsEditor v-if="showBreakoutRoomsEditor"
@@ -100,7 +105,7 @@
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import BreakoutRoomsEditor from '../../BreakoutRoomsEditor/BreakoutRoomsEditor.vue'
 import SendMessageDialog from '../../BreakoutRoomsEditor/SendMessageDialog.vue'
-import BreakoutRoomsList from '../../BreakoutRoomsEditor/BreakoutRoomsList.vue'
+import BreakoutRoomItem from './BreakoutRoomItem.vue'
 
 // Icons
 import Delete from 'vue-material-design-icons/Delete.vue'
@@ -123,7 +128,7 @@ export default {
 		NcButton,
 		BreakoutRoomsEditor,
 		SendMessageDialog,
-		BreakoutRoomsList,
+		BreakoutRoomItem,
 
 		// Icons
 		Delete,

From a654f32c2027cf6510ebf80dc0b3582be1519b5e Mon Sep 17 00:00:00 2001
From: Marco <marcoambrosini@icloud.com>
Date: Fri, 10 Feb 2023 14:43:37 +0100
Subject: [PATCH 3/7] Show assistance warnings to moderators

Signed-off-by: Marco <marcoambrosini@icloud.com>
---
 .../BreakoutRooms/BreakoutRoomItem.vue        | 34 ++++++++++++++++---
 1 file changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue
index 15e8ef9101..b78d809663 100644
--- a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue
+++ b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue
@@ -32,8 +32,7 @@
 			<GoogleCircles :size="20" />
 		</template>
 		<template #actions>
-			<NcActionButton v-if="breakoutRoom.breakoutRoomStatus ===
-					CONVERSATION.BREAKOUT_ROOM_STATUS.STATUS_ASSISTANCE_REQUESTED"
+			<NcActionButton v-if="showAssistanceButton"
 				@click="dismissRequestAssistance(breakoutRoom.token)">
 				<template #icon>
 					<HandBackLeft :size="16" />
@@ -67,8 +66,10 @@ import GoogleCircles from 'vue-material-design-icons/GoogleCircles.vue'
 import HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'
 import Send from 'vue-material-design-icons/Send.vue'
 
+import { showWarning } from '@nextcloud/dialogs'
+
 // Constants
-import { CONVERSATION } from '../../../constants.js'
+import { CONVERSATION, PARTICIPANT } from '../../../constants.js'
 
 export default {
 	name: 'BreakoutRoomItem',
@@ -96,10 +97,35 @@ export default {
 	data() {
 		return {
 			openedDialog: undefined,
-			CONVERSATION,
 		}
 	},
 
+	computed: {
+		participantType() {
+			return this.breakoutRoom.participantType
+		},
+
+		canFullModerate() {
+			return this.participantType === PARTICIPANT.TYPE.OWNER || this.participantType === PARTICIPANT.TYPE.MODERATOR
+		},
+
+		canModerate() {
+			return this.canFullModerate || this.participantType === PARTICIPANT.TYPE.GUEST_MODERATOR
+		},
+
+		showAssistanceButton() {
+			return this.canModerate && this.breakoutRoom.breakoutRoomStatus === CONVERSATION.BREAKOUT_ROOM_STATUS.STATUS_ASSISTANCE_REQUESTED
+		},
+	},
+
+	watch: {
+		showAssistanceButton(newValue) {
+			if (newValue) {
+				showWarning(t('spreed', 'Assistance requested in {roomName}', { roomName: this.breakoutRoom.displayName }))
+			}
+		},
+	},
+
 	methods: {
 		openSendMessageForm(token) {
 			this.openedDialog = token

From 34bba3d2cdc1bf5678ac1e537330d20b3209d80b Mon Sep 17 00:00:00 2001
From: Marco <marcoambrosini@icloud.com>
Date: Fri, 10 Feb 2023 14:47:23 +0100
Subject: [PATCH 4/7] Always show breakout rooms actions

Signed-off-by: Marco <marcoambrosini@icloud.com>
---
 src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue
index b78d809663..8c51003428 100644
--- a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue
+++ b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue
@@ -22,6 +22,7 @@
 
 <template>
 	<NcAppNavigationItem :key="breakoutRoom.displayName"
+		:force-display-actions="true"
 		class="breakout-rooms__room"
 		:title="breakoutRoom.displayName"
 		:allow-collapse="true"

From 1b999cc86f5365396f6f89024946752436853fae Mon Sep 17 00:00:00 2001
From: Marco <marcoambrosini@icloud.com>
Date: Fri, 10 Feb 2023 14:52:12 +0100
Subject: [PATCH 5/7] Fix api requests

Signed-off-by: Marco <marcoambrosini@icloud.com>
---
 src/services/breakoutRoomsService.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/services/breakoutRoomsService.js b/src/services/breakoutRoomsService.js
index b0aff0b8d7..fb944590ca 100644
--- a/src/services/breakoutRoomsService.js
+++ b/src/services/breakoutRoomsService.js
@@ -112,7 +112,7 @@ const getBreakoutRoomsParticipants = async function(token) {
  * @return {Promise<AxiosResponse<any>>} The array of conversations
  */
 const requestAssistance = async function(token) {
-	return await axios.post(generateOcsUrl('/apps/spreed/api/v1/room/{token}/breakout-rooms/{token}/request-assistance', {
+	return await axios.post(generateOcsUrl('/apps/spreed/api/v1/breakout-rooms/{token}/request-assistance', {
 		token,
 	})
 	)
@@ -125,7 +125,7 @@ const requestAssistance = async function(token) {
  * @return {Promise<AxiosResponse<any>>} The array of conversations
  */
 const resetRequestAssistance = async function(token) {
-	return await axios.delete(generateOcsUrl('/apps/spreed/api/v1/room/{token}/breakout-rooms/{token}/request-assistance', {
+	return await axios.delete(generateOcsUrl('/apps/spreed/api/v1/breakout-rooms/{token}/request-assistance', {
 		token,
 	})
 	)

From 0750a129640aee82bae452423ce1314f71c48279 Mon Sep 17 00:00:00 2001
From: Marco <marcoambrosini@icloud.com>
Date: Fri, 10 Feb 2023 15:07:03 +0100
Subject: [PATCH 6/7] Improve code style

Signed-off-by: Marco <marcoambrosini@icloud.com>
---
 .../BreakoutRooms/BreakoutRoomItem.vue        | 38 ++++++++++++-------
 1 file changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue
index 8c51003428..536a310b35 100644
--- a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue
+++ b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue
@@ -21,10 +21,10 @@
 -->
 
 <template>
-	<NcAppNavigationItem :key="breakoutRoom.displayName"
+	<NcAppNavigationItem :key="roomName"
 		:force-display-actions="true"
 		class="breakout-rooms__room"
-		:title="breakoutRoom.displayName"
+		:title="roomName"
 		:allow-collapse="true"
 		:inline-actions="1"
 		:open="true">
@@ -34,13 +34,13 @@
 		</template>
 		<template #actions>
 			<NcActionButton v-if="showAssistanceButton"
-				@click="dismissRequestAssistance(breakoutRoom.token)">
+				@click="dismissRequestAssistance">
 				<template #icon>
 					<HandBackLeft :size="16" />
 				</template>
 				{{ t('spreed', 'Dismiss request for assistance') }}
 			</NcActionButton>
-			<NcActionButton @click="openSendMessageForm(breakoutRoom.token)">
+			<NcActionButton @click="openSendMessageForm(roomToken)">
 				<template #icon>
 					<Send :size="16" />
 				</template>
@@ -48,11 +48,11 @@
 			</NcActionButton>
 		</template>
 		<!-- Send message dialog -->
-		<SendMessageDialog v-if="openedDialog === breakoutRoom.token"
-			:display-name="breakoutRoom.displayName"
-			:token="breakoutRoom.token"
-			@close="closeSendMessageForm(breakoutRoom.token)" />
-		<template v-for="participant in $store.getters.participantsList(breakoutRoom.token)">
+		<SendMessageDialog v-if="openedDialog === roomToken"
+			:display-name="roomName"
+			:token="roomToken"
+			@close="closeSendMessageForm" />
+		<template v-for="participant in $store.getters.participantsList(roomToken)">
 			<Participant :key="participant.actorId" :participant="participant" />
 		</template>
 	</NcAppNavigationItem>
@@ -106,6 +106,14 @@ export default {
 			return this.breakoutRoom.participantType
 		},
 
+		roomName() {
+			return this.breakoutRoom.displayName
+		},
+
+		roomToken() {
+			return this.breakoutRoom.token
+		},
+
 		canFullModerate() {
 			return this.participantType === PARTICIPANT.TYPE.OWNER || this.participantType === PARTICIPANT.TYPE.MODERATOR
 		},
@@ -122,22 +130,24 @@ export default {
 	watch: {
 		showAssistanceButton(newValue) {
 			if (newValue) {
-				showWarning(t('spreed', 'Assistance requested in {roomName}', { roomName: this.breakoutRoom.displayName }))
+				showWarning(t('spreed', 'Assistance requested in {roomName}', {
+					roomName: this.roomName,
+				}))
 			}
 		},
 	},
 
 	methods: {
-		openSendMessageForm(token) {
-			this.openedDialog = token
+		openSendMessageForm() {
+			this.openedDialog = this.roomToken
 		},
 
 		closeSendMessageForm() {
 			this.openedDialog = undefined
 		},
 
-		dismissRequestAssistance(token) {
-			this.$store.dispatch('resetRequestAssistanceAction', { token })
+		dismissRequestAssistance() {
+			this.$store.dispatch('resetRequestAssistanceAction', { token: this.roomToken })
 		},
 	},
 }

From 2b2094a6cc8a9ba729443846274c75eece767eb8 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Fri, 10 Feb 2023 15:29:05 +0100
Subject: [PATCH 7/7] improve code style and refactor

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../BreakoutRooms/BreakoutRoomItem.vue        | 25 ++++++++++++-------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue
index 536a310b35..15ac2037c9 100644
--- a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue
+++ b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue
@@ -40,7 +40,7 @@
 				</template>
 				{{ t('spreed', 'Dismiss request for assistance') }}
 			</NcActionButton>
-			<NcActionButton @click="openSendMessageForm(roomToken)">
+			<NcActionButton @click="openSendMessageForm">
 				<template #icon>
 					<Send :size="16" />
 				</template>
@@ -48,30 +48,33 @@
 			</NcActionButton>
 		</template>
 		<!-- Send message dialog -->
-		<SendMessageDialog v-if="openedDialog === roomToken"
+		<SendMessageDialog v-if="isDialogOpened"
 			:display-name="roomName"
 			:token="roomToken"
 			@close="closeSendMessageForm" />
-		<template v-for="participant in $store.getters.participantsList(roomToken)">
+		<template v-for="participant in roomParticipants">
 			<Participant :key="participant.actorId" :participant="participant" />
 		</template>
 	</NcAppNavigationItem>
 </template>
 
 <script>
+// Components
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
 import Participant from '../Participants/ParticipantsList/Participant/Participant.vue'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import SendMessageDialog from '../../BreakoutRoomsEditor/SendMessageDialog.vue'
+
+// Icons
 import GoogleCircles from 'vue-material-design-icons/GoogleCircles.vue'
 import HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'
 import Send from 'vue-material-design-icons/Send.vue'
 
-import { showWarning } from '@nextcloud/dialogs'
-
 // Constants
 import { CONVERSATION, PARTICIPANT } from '../../../constants.js'
 
+import { showWarning } from '@nextcloud/dialogs'
+
 export default {
 	name: 'BreakoutRoomItem',
 
@@ -97,7 +100,7 @@ export default {
 
 	data() {
 		return {
-			openedDialog: undefined,
+			isDialogOpened: false,
 		}
 	},
 
@@ -114,6 +117,10 @@ export default {
 			return this.breakoutRoom.token
 		},
 
+		roomParticipants() {
+			return this.$store.getters.participantsList(this.roomToken)
+		},
+
 		canFullModerate() {
 			return this.participantType === PARTICIPANT.TYPE.OWNER || this.participantType === PARTICIPANT.TYPE.MODERATOR
 		},
@@ -139,11 +146,11 @@ export default {
 
 	methods: {
 		openSendMessageForm() {
-			this.openedDialog = this.roomToken
+			this.isDialogOpened = true
 		},
 
 		closeSendMessageForm() {
-			this.openedDialog = undefined
+			this.isDialogOpened = false
 		},
 
 		dismissRequestAssistance() {