[stable30] fix: delegate message posting from NewMessage to parent components

src/components/BreakoutRoomsEditor/SendMessageDialog.vue

@@ -15,15 +15,14 @@
 			class="send-message-dialog"
 			:token="token"
 			:container="modalContainerId"
-			:aria-label="t('spreed', 'Post message')"
+			:aria-label="dialogTitle"
+			dialog
 			:broadcast="broadcast"
-			@sent="handleMessageSent"
-			@failure="handleMessageFailure" />
+			@submit="handleSubmit" />
 	</NcDialog>
 </template>
 
 <script>
-import { showError, showSuccess } from '@nextcloud/dialogs'
 import { t } from '@nextcloud/l10n'
 
 import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
@@ -40,17 +39,17 @@ export default {
 
 	props: {
 		/**
-		 * The Breakout room token.
+		 * The conversation token.
 		 */
 		token: {
 			type: String,
 			required: true,
 		},
 
 		/**
-		 * The conversation display name
+		 * The dialog title
 		 */
-		displayName: {
+		dialogTitle: {
 			type: String,
 			default: '',
 		},
@@ -66,22 +65,14 @@ export default {
 		},
 	},
 
-	emits: ['close'],
+	emits: ['close', 'submit'],
 
 	data() {
 		return {
 			modalContainerId: null,
 		}
 	},
 
-	computed: {
-		dialogTitle() {
-			return this.broadcast
-				? t('spreed', 'Send a message to all breakout rooms')
-				: t('spreed', 'Send a message to "{roomName}"', { roomName: this.displayName })
-		},
-	},
-
 	mounted() {
 		// Postpone render of NewMessage until modal container is mounted
 		this.modalContainerId = '#' + this.$refs.dialog.$el.querySelector('.modal-container')?.id
@@ -92,16 +83,9 @@ export default {
 
 	methods: {
 		t,
-		handleMessageSent() {
-			showSuccess(this.broadcast
-				? t('spreed', 'The message was sent to all breakout rooms')
-				: t('spreed', 'The message was sent to "{roomName}"', { roomName: this.displayName }))
-			this.$emit('close')
-		},
 
-		handleMessageFailure() {
-			showError(t('spreed', 'The message could not be sent'))
-			this.$emit('close')
+		handleSubmit(event) {
+			this.$emit('submit', event)
 		},
 	},
 

src/components/NewMessage/NewMessage.vue

@@ -34,11 +34,11 @@
 
 			<!-- Input area -->
 			<div class="new-message-form__input">
-				<NewMessageAbsenceInfo v-if="!upload && userAbsence"
+				<NewMessageAbsenceInfo v-if="!dialog && userAbsence"
 					:user-absence="userAbsence"
 					:display-name="conversation.displayName" />
 
-				<NewMessageChatSummary v-if="showChatSummary" />
+				<NewMessageChatSummary v-if="!dialog && showChatSummary" />
 
 				<div class="new-message-form__emoji-picker">
 					<NcEmojiPicker v-if="!disabled"
@@ -217,7 +217,6 @@ import BrowserStorage from '../../services/BrowserStorage.js'
 import { getTalkConfig, hasTalkFeature } from '../../services/CapabilitiesManager.ts'
 import { EventBus } from '../../services/EventBus.ts'
 import { shareFile } from '../../services/filesSharingServices.js'
-import { useBreakoutRoomsStore } from '../../stores/breakoutRooms.ts'
 import { useChatExtrasStore } from '../../stores/chatExtras.js'
 import { useSettingsStore } from '../../stores/settings.js'
 import { fetchClipboardContent } from '../../utils/clipboard.js'
@@ -268,6 +267,15 @@ export default {
 			default: undefined,
 		},
 
+		/**
+		 * If component is used in a dialog, submit should emit an event to parent
+		 * instead of posting the message
+		 */
+		dialog: {
+			type: Boolean,
+			default: false,
+		},
+
 		/**
 		 * Broadcast messages to all breakout rooms of a given conversation.
 		 */
@@ -293,7 +301,7 @@ export default {
 		},
 	},
 
-	emits: ['sent', 'failure', 'upload'],
+	emits: ['submit', 'dismiss'],
 
 	expose: ['focusInput'],
 
@@ -303,7 +311,6 @@ export default {
 		const { autoComplete, userData } = useChatMentions(token)
 		const { createTemporaryMessage } = useTemporaryMessage()
 		return {
-			breakoutRoomsStore: useBreakoutRoomsStore(),
 			chatExtrasStore: useChatExtrasStore(),
 			settingsStore: useSettingsStore(),
 			supportTypingStatus,
@@ -515,6 +522,8 @@ export default {
 		text(newValue) {
 			if (this.currentUploadId && !this.upload) {
 				return
+			} else if (this.dialog && this.broadcast) {
+				return
 			}
 			this.debouncedUpdateChatInput(newValue)
 		},
@@ -682,21 +691,7 @@ export default {
 			this.debouncedUpdateChatInput.clear()
 			this.chatExtrasStore.removeChatInput(this.token)
 
-			if (this.upload) {
-				// remove Quote component
-				this.chatExtrasStore.removeParentIdToReply(this.token)
-
-				if (this.$store.getters.getInitialisedUploads(this.currentUploadId).length) {
-					// If dialog contains files to upload, delegate sending
-					this.$emit('upload', { caption: this.text, options })
-					return
-				} else {
-					// Dismiss dialog, process as normal message sending otherwise
-					this.$emit('sent')
-				}
-			}
-
-			if (this.hasText) {
+			if (this.hasText || (this.dialog && this.upload)) {
 				const temporaryMessage = this.createTemporaryMessage({
 					message: this.text.trim(),
 					token: this.token,
@@ -707,8 +702,8 @@ export default {
 				// Also remove the message to be replied for this conversation
 				this.chatExtrasStore.removeParentIdToReply(this.token)
 
-				this.broadcast
-					? await this.broadcastMessage(this.token, temporaryMessage.message)
+				this.dialog
+					? await this.submitMessage(this.token, temporaryMessage, options)
 					: await this.postMessage(this.token, temporaryMessage, options)
 				this.resetTypingIndicator()
 			}
@@ -718,20 +713,14 @@ export default {
 		async postMessage(token, temporaryMessage, options) {
 			try {
 				await this.$store.dispatch('postNewMessage', { token, temporaryMessage, options })
-				this.$emit('sent')
-			} catch {
-				this.$emit('failure')
+			} catch (e) {
+				console.error(e)
 			}
 		},
 
 		// Broadcast message to all breakout rooms
-		async broadcastMessage(token, message) {
-			try {
-				await this.breakoutRoomsStore.broadcastMessageToBreakoutRooms({ token, message })
-				this.$emit('sent')
-			} catch {
-				this.$emit('failure')
-			}
+		async submitMessage(token, temporaryMessage, options) {
+			this.$emit('submit', { token, temporaryMessage, options })
 		},
 
 		async handleSubmitSpam(numberOfMessages) {
@@ -759,7 +748,7 @@ export default {
 				// refocus input as the user might want to type further
 				this.focusInput()
 			} catch {
-				this.$emit('failure')
+				this.$emit('dismiss')
 				showError(t('spreed', 'The message could not be edited'))
 			}
 		},
@@ -966,7 +955,7 @@ export default {
 		},
 
 		handleEditLastMessage(event) {
-			if (!this.canEditMessage || this.text || this.upload || this.broadcast || this.isRecordingAudio) {
+			if (!this.canEditMessage || this.text || this.dialog || this.isRecordingAudio) {
 				return
 			}
 

src/components/NewMessage/NewMessageUploadEditor.vue

@@ -57,7 +57,7 @@
 				<NcButton type="tertiary" @click="handleDismiss">
 					{{ t('spreed', 'Dismiss') }}
 				</NcButton>
-				<NcButton ref="submitButton" type="primary" @click="handleUpload({ caption: null, options: null})">
+				<NcButton ref="submitButton" type="primary" @click="handleLegacyUpload">
 					{{ t('spreed', 'Send') }}
 				</NcButton>
 			</div>
@@ -66,12 +66,12 @@
 				role="region"
 				class="upload-editor__textfield"
 				upload
+				dialog
 				:token="token"
 				:container="modalContainerId"
 				:aria-label="t('spreed', 'Post message')"
-				@upload="handleUpload"
-				@sent="handleDismiss"
-				@failure="handleDismiss" />
+				@submit="handleUpload"
+				@dismiss="handleDismiss" />
 		</div>
 	</NcModal>
 </template>
@@ -190,8 +190,33 @@ export default {
 			this.$store.dispatch('discardUpload', this.currentUploadId)
 		},
 
-		handleUpload({ caption, options }) {
-			this.$store.dispatch('uploadFiles', { token: this.token, uploadId: this.currentUploadId, caption, options })
+		handleLegacyUpload() {
+			this.$store.dispatch('uploadFiles', {
+				token: this.token,
+				uploadId: this.currentUploadId,
+				caption: null,
+				options: null,
+			})
+		},
+
+		async handleUpload({ token, temporaryMessage, options }) {
+			if (this.files.length) {
+				// Create a share with optional caption
+				await this.$store.dispatch('uploadFiles', {
+					token,
+					uploadId: this.currentUploadId,
+					caption: temporaryMessage.message,
+					options,
+				})
+			} else {
+				// Proceed as a normal message
+				try {
+					await this.$store.dispatch('discardUpload', this.currentUploadId)
+					await this.$store.dispatch('postNewMessage', { token, temporaryMessage, options })
+				} catch (e) {
+					console.error(e)
+				}
+			}
 		},
 		/**
 		 * Clicks the hidden file input when clicking the correspondent NcActionButton,

src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue

@@ -37,7 +37,7 @@
 						</template>
 						{{ t('spreed', 'Dismiss request for assistance') }}
 					</NcActionButton>
-					<NcActionButton @click="openSendMessageDialog">
+					<NcActionButton @click="isDialogOpened = true">
 						<template #icon>
 							<Send :size="16" />
 						</template>
@@ -46,9 +46,10 @@
 				</NcActions>
 				<!-- Send message dialog -->
 				<SendMessageDialog v-if="isDialogOpened"
-					:display-name="roomName"
+					:dialog-title="dialogTitle"
 					:token="roomToken"
-					@close="closeSendMessageDialog" />
+					@submit="sentMessageToRoom"
+					@close="isDialogOpened = false" />
 			</template>
 		</div>
 		<ul v-show="showParticipants">
@@ -65,7 +66,7 @@ import MenuDown from 'vue-material-design-icons/MenuDown.vue'
 import MenuRight from 'vue-material-design-icons/MenuRight.vue'
 import Send from 'vue-material-design-icons/Send.vue'
 
-import { showWarning } from '@nextcloud/dialogs'
+import { showSuccess, showWarning } from '@nextcloud/dialogs'
 import { t } from '@nextcloud/l10n'
 
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
@@ -145,6 +146,10 @@ export default {
 			return this.isParticipantsEditor ? this.name : this.breakoutRoom?.displayName
 		},
 
+		dialogTitle() {
+			return t('spreed', 'Send a message to "{roomName}"', { roomName: this.roomName })
+		},
+
 		roomToken() {
 			return this.breakoutRoom?.token
 		},
@@ -195,13 +200,6 @@ export default {
 
 	methods: {
 		t,
-		openSendMessageDialog() {
-			this.isDialogOpened = true
-		},
-
-		closeSendMessageDialog() {
-			this.isDialogOpened = false
-		},
 
 		dismissRequestAssistance() {
 			this.breakoutRoomsStore.dismissRequestAssistance(this.roomToken)
@@ -232,6 +230,16 @@ export default {
 		toggleParticipantsVisibility() {
 			this.showParticipants = !this.showParticipants
 		},
+
+		async sentMessageToRoom({ token, temporaryMessage, options }) {
+			try {
+				await this.$store.dispatch('postNewMessage', { token, temporaryMessage, options })
+				showSuccess(t('spreed', 'The message was sent to "{roomName}"', { roomName: this.roomName }))
+				this.isDialogOpened = false
+			} catch (e) {
+				console.error(e)
+			}
+		},
 	},
 }
 </script>