diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue index c98ebe32d1b..4c136639e28 100644 --- a/src/components/MessagesList/MessagesGroup/Message/Message.vue +++ b/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"> {{ t('spreed', 'Mark as unread') }} - + {{ t('spreed', 'Go to file') }} + + + {{ toggleShowAsWidgetLabel }} + @@ -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', { diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue index 2a5bed512f6..c4abfc433a6 100644 --- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue +++ b/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() { diff --git a/src/composables/useMessageInfo.js b/src/composables/useMessageInfo.js index 442e567c7ed..03842423dc8 100644 --- a/src/composables/useMessageInfo.js +++ b/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, } - }