Merge pull request #10730 from nextcloud/feat/5354/captions-frontend

feat(NewMessageUploadEditor) - caption to file share

Author: Antreesy

src/components/MessagesList/MessagesGroup/Message/Message.spec.js

@@ -325,6 +325,7 @@ describe('Message.vue', () => {
 				const messageEl = wrapper.findComponent({ name: 'NcRichText' })
 				// note: indices as object keys are on purpose
 				expect(messageEl.props('arguments')).toMatchObject(expectedRichParameters)
+				return messageEl
 			}
 
 			test('renders mentions', () => {
@@ -364,7 +365,7 @@ describe('Message.vue', () => {
 				)
 			})
 
-			test('renders file previews', () => {
+			test('renders single file preview', () => {
 				const params = {
 					actor: {
 						id: 'alice',
@@ -391,6 +392,36 @@ describe('Message.vue', () => {
 				)
 			})
 
+			test('renders single file preview with caption', () => {
+				const caption = 'text caption'
+				const params = {
+					actor: {
+						id: 'alice',
+						name: 'Alice',
+						type: 'user',
+					},
+					file: {
+						path: 'some/path',
+						type: 'file',
+					},
+				}
+				const messageEl = renderRichObject(
+					caption,
+					params, {
+						actor: {
+							component: Mention,
+							props: params.actor,
+						},
+						file: {
+							component: FilePreview,
+							props: params.file,
+						},
+					}
+				)
+
+				expect(messageEl.props('text')).toBe('{file}' + '\n\n' + caption)
+			})
+
 			test('renders deck cards', () => {
 				const params = {
 					actor: {

src/components/MessagesList/MessagesGroup/Message/Message.vue

@@ -47,19 +47,19 @@ the main body of the message as well as a quote.
 					class="message-body__main__text">
 					<Quote v-if="parent" v-bind="parent" />
 					<div class="single-emoji">
-						{{ message }}
+						{{ renderedMessage }}
 					</div>
 				</div>
 				<div v-else-if="showJoinCallButton" class="message-body__main__text call-started">
-					<NcRichText :text="message"
+					<NcRichText :text="renderedMessage"
 						:arguments="richParameters"
 						autolink
 						dir="auto"
 						:reference-limit="0" />
 					<CallButton />
 				</div>
 				<div v-else-if="showResultsButton || isSystemMessage" class="message-body__main__text system-message">
-					<NcRichText :text="message"
+					<NcRichText :text="renderedMessage"
 						:arguments="richParameters"
 						autolink
 						dir="auto"
@@ -72,7 +72,7 @@ the main body of the message as well as a quote.
 						show-as-button />
 				</div>
 				<div v-else-if="isDeletedMessage" class="message-body__main__text deleted-message">
-					<NcRichText :text="message"
+					<NcRichText :text="renderedMessage"
 						:arguments="richParameters"
 						autolink
 						dir="auto"
@@ -83,7 +83,7 @@ the main body of the message as well as a quote.
 					@mouseover="handleMarkdownMouseOver"
 					@mouseleave="handleMarkdownMouseLeave">
 					<Quote v-if="parent" v-bind="parent" />
-					<NcRichText :text="message"
+					<NcRichText :text="renderedMessage"
 						:arguments="richParameters"
 						autolink
 						dir="auto"
@@ -457,6 +457,11 @@ export default {
 			type: Array,
 			default: () => { return [] },
 		},
+
+		referenceId: {
+			type: String,
+			default: '',
+		},
 	},
 
 	emits: ['toggle-combined-system-message'],
@@ -502,6 +507,15 @@ export default {
 			return !this.isLastMessage && this.id === this.$store.getters.getVisualLastReadMessageId(this.token)
 		},
 
+		renderedMessage() {
+			if (this.messageParameters?.file && this.message !== '{file}') {
+				// Add a new line after file to split content into different paragraphs
+				return '{file}' + '\n\n' + this.message
+			} else {
+				return this.message
+			}
+		},
+
 		messageObject() {
 			return this.$store.getters.message(this.token, this.id)
 		},
@@ -568,7 +582,7 @@ export default {
 			let match
 			let emojiStrings = ''
 			let emojiCount = 0
-			const trimmedMessage = this.message.trim()
+			const trimmedMessage = this.renderedMessage.trim()
 
 			// eslint-disable-next-line no-cond-assign
 			while (match = regex.exec(trimmedMessage)) {
@@ -600,6 +614,7 @@ export default {
 						props: Object.assign({
 							token: this.token,
 							itemType,
+							referenceId: this.referenceId,
 						}, this.messageParameters[p]),
 					}
 				} else if (type === 'deck-card') {

src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue

@@ -32,7 +32,7 @@
 			'file-preview--row-layout': rowLayout }"
 		@click.exact="handleClick"
 		@keydown.enter="handleClick">
-		<div v-if="!isLoading"
+		<div v-if="!isLoading || fallbackLocalUrl"
 			class="image-container"
 			:class="{'playable': isPlayable}">
 			<span v-if="isPlayable && !smallPreview" class="play-video-button">
@@ -121,6 +121,13 @@ export default {
 			type: String,
 			required: true,
 		},
+		/**
+		 * Reference id from the message
+		 */
+		referenceId: {
+			type: String,
+			default: '',
+		},
 		/**
 		 * File name
 		 */
@@ -283,6 +290,10 @@ export default {
 			return this.name
 		},
 
+		fallbackLocalUrl() {
+			return this.$store.getters.getLocalUrl(this.referenceId)
+		},
+
 		previewTooltip() {
 			if (this.shouldShowFileDetail) {
 				// no tooltip as the file name is already visible directly
@@ -363,6 +374,9 @@ export default {
 			if (this.previewType === PREVIEW_TYPE.TEMPORARY) {
 				return this.localUrl
 			}
+			if (this.fallbackLocalUrl) {
+				return this.fallbackLocalUrl
+			}
 			if (this.previewType === PREVIEW_TYPE.MIME_ICON || this.rowLayout) {
 				return OC.MimeType.getIconUrl(this.mimetype)
 			}

src/components/NewMessage/NewMessage.vue

@@ -109,7 +109,7 @@
 
 			<!-- Send buttons -->
 			<template v-else>
-				<NcActions v-if="!broadcast"
+				<NcActions v-if="!broadcast && !upload"
 					:container="container"
 					:force-menu="true">
 					<!-- Silent send -->
@@ -240,6 +240,14 @@ export default {
 			default: false,
 		},
 
+		/**
+		 * Upload files caption.
+		 */
+		upload: {
+			type: Boolean,
+			default: false,
+		},
+
 		/**
 		 * Show an indicator if someone is currently typing a message.
 		 */
@@ -359,11 +367,11 @@ export default {
 		},
 
 		showAttachmentsMenu() {
-			return this.canShareFiles && !this.broadcast
+			return this.canShareFiles && !this.broadcast && !this.upload
 		},
 
 		showAudioRecorder() {
-			return !this.hasText && this.canUploadFiles && !this.broadcast
+			return !this.hasText && this.canUploadFiles && !this.broadcast && !this.upload
 		},
 		showTypingStatus() {
 			return this.hasTypingIndicator && this.supportTypingStatus
@@ -446,8 +454,15 @@ export default {
 		},
 
 		handleUploadStart() {
-			// refocus on upload start as the user might want to type again while the upload is running
-			this.focusInput()
+			if (this.upload) {
+				return
+			}
+			this.$nextTick(() => {
+				// reset main input in chat view after upload file with caption
+				this.text = this.$store.getters.currentMessageInput(this.token)
+				// refocus on upload start as the user might want to type again while the upload is running
+				this.focusInput()
+			})
 		},
 
 		/**
@@ -466,6 +481,12 @@ export default {
 				}
 			}
 
+			if (this.upload) {
+				this.$emit('sent', this.text)
+				this.$store.dispatch('setCurrentMessageInput', { token: this.token, text: '' })
+				return
+			}
+
 			if (this.hasText) {
 				// FIXME upstream: https://github.com/nextcloud-libraries/nextcloud-vue/issues/4492
 				const temp = document.createElement('textarea')