fix(widget): allow to show file share as widget if possible

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

@@ -24,6 +24,7 @@
 				:is-deleting="isDeleting"
 				:has-call="conversation.hasCall"
 				:message="message"
+				:show-as-widget="showAsWidget"
 				:read-info="readInfo">
 				<!-- reactions buttons and popover with details -->
 				<Reactions v-if="Object.keys(message.reactions).length"
@@ -45,6 +46,7 @@
 				:is-emoji-picker-open.sync="isEmojiPickerOpen"
 				:is-reactions-menu-open.sync="isReactionsMenuOpen"
 				:is-forwarder-open.sync="isForwarderOpen"
+				:show-as-widget.sync="showAsWidget"
 				:can-react="canReact"
 				:message="message"
 				:previous-message-id="previousMessageId"
@@ -202,6 +204,7 @@ export default {
 			isReactionsMenuOpen: false,
 			isForwarderOpen: false,
 			isTranslateDialogOpen: false,
+			showAsWidget: false,
 		}
 	},
 

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

@@ -107,13 +107,21 @@
 						</template>
 						{{ t('spreed', 'Mark as unread') }}
 					</NcActionButton>
-					<NcActionLink v-if="linkToFile"
-						:href="linkToFile">
+					<NcActionLink v-if="linkToFileShare"
+						:href="linkToFileShare">
 						<template #icon>
 							<File :size="20" />
 						</template>
 						{{ t('spreed', 'Go to file') }}
 					</NcActionLink>
+					<NcActionButton v-if="linkToFileShare"
+						close-after-click
+						@click="toggleShowAsWidget">
+						<template #icon>
+							<Widgets :size="20" />
+						</template>
+						{{ toggleShowAsWidgetLabel }}
+					</NcActionButton>
 					<NcActionButton v-if="canForwardMessage && !isInNoteToSelf"
 						close-after-click
 						@click="forwardToNote">
@@ -272,6 +280,7 @@ import Plus from 'vue-material-design-icons/Plus.vue'
 import Reply from 'vue-material-design-icons/Reply.vue'
 import Share from 'vue-material-design-icons/Share.vue'
 import Translate from 'vue-material-design-icons/Translate.vue'
+import Widgets from 'vue-material-design-icons/Widgets.vue'
 
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { t } from '@nextcloud/l10n'
@@ -330,6 +339,7 @@ export default {
 		Reply,
 		Share,
 		Translate,
+		Widgets,
 	},
 
 	directives: {
@@ -371,6 +381,11 @@ export default {
 			required: true,
 		},
 
+		showAsWidget: {
+			type: Boolean,
+			required: false,
+		},
+
 		readInfo: {
 			type: Object,
 			required: true,
@@ -382,7 +397,17 @@ export default {
 		},
 	},
 
-	emits: ['delete', 'update:isActionMenuOpen', 'update:isEmojiPickerOpen', 'update:isReactionsMenuOpen', 'update:isForwarderOpen', 'show-translate-dialog', 'reply', 'edit'],
+	emits: [
+		'delete',
+		'reply',
+		'edit',
+		'show-translate-dialog',
+		'update:isActionMenuOpen',
+		'update:isEmojiPickerOpen',
+		'update:isReactionsMenuOpen',
+		'update:isForwarderOpen',
+		'update:showAsWidget',
+	],
 
 	setup(props) {
 		const { message } = toRefs(props)
@@ -394,6 +419,7 @@ export default {
 			isCurrentUserOwnMessage,
 			isFileShare,
 			isFileShareWithoutCaption,
+			linkToFileShare,
 			isConversationReadOnly,
 			isConversationModifiable,
 		} = useMessageInfo(message)
@@ -407,6 +433,7 @@ export default {
 			isCurrentUserOwnMessage,
 			isFileShare,
 			isFileShareWithoutCaption,
+			linkToFileShare,
 			isDeleteable,
 			isConversationReadOnly,
 			isConversationModifiable,
@@ -448,13 +475,10 @@ export default {
 				&& this.$store.getters.isActorUser()
 		},
 
-		linkToFile() {
-			if (this.isFileShare) {
-				const firstFileKey = (Object.keys(this.message.messageParameters).find(key => key.startsWith('file')))
-				return this.message.messageParameters?.[firstFileKey]?.link
-			} else {
-				return ''
-			}
+		toggleShowAsWidgetLabel() {
+			return this.showAsWidget
+				? t('spreed', 'Hide widget')
+				: t('spreed', 'Show as widget')
 		},
 
 		isCurrentGuest() {
@@ -649,6 +673,10 @@ export default {
 			this.$emit('update:isReactionsMenuOpen', true)
 		},
 
+		toggleShowAsWidget() {
+			this.$emit('update:showAsWidget', !this.showAsWidget)
+		},
+
 		async forwardToNote() {
 			try {
 				await this.$store.dispatch('forwardMessage', {

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

@@ -186,7 +186,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
-
+		showAsWidget: {
+			type: Boolean,
+			default: false,
+		},
 		readInfo: {
 			type: Object,
 			required: true,
@@ -198,11 +201,15 @@ export default {
 		const {
 			isEditable,
 			isFileShare,
+			isFileShareWithoutCaption,
+			linkToFileShare,
 		} = useMessageInfo(message)
 		return {
 			isInCall: useIsInCall(),
 			isEditable,
 			isFileShare,
+			isFileShareWithoutCaption,
+			linkToFileShare,
 		}
 	},
 
@@ -220,12 +227,17 @@ export default {
 
 	computed: {
 		renderedMessage() {
-			if (this.isFileShare && this.message.message !== '{file}') {
-				// Add a new line after file to split content into different paragraphs
-				return '{file}' + '\n\n' + this.message.message
-			} else {
+			if (!this.isFileShare) {
 				return this.message.message
 			}
+
+			const caption = this.isFileShareWithoutCaption
+				? ''
+				: `\n\n${this.message.message}`
+
+			return (this.linkToFileShare && this.showAsWidget)
+				? this.linkToFileShare + caption
+				: '{file}' + caption
 		},
 
 		isSystemMessage() {

src/composables/useMessageInfo.js

@@ -70,6 +70,14 @@ export function useMessageInfo(message = ref({})) {
 
 	const isFileShareWithoutCaption = computed(() => message.value.message === '{file}' && isFileShare.value)
 
+	const linkToFileShare = computed(() => {
+		if (!isFileShare.value) {
+			return ''
+		}
+		const firstFileKey = (Object.keys(message.value.messageParameters).find(key => key.startsWith('file')))
+		return message.value.messageParameters?.[firstFileKey]?.link
+	})
+
 	const isDeleteable = computed(() =>
 		(hasTalkFeature(message.value.token, 'delete-messages-unlimited') || (moment(message.value.timestamp * 1000).add(6, 'h')) > moment())
 		&& (message.value.messageType === 'comment' || message.value.messageType === 'voice-message')
@@ -120,9 +128,9 @@ export function useMessageInfo(message = ref({})) {
 		isConversationReadOnly,
 		isFileShareWithoutCaption,
 		isFileShare,
+		linkToFileShare,
 		remoteServer,
 		lastEditor,
 		actorDisplayName,
 	}
-
 }