Merge pull request #5204 from nextcloud/backport/5019/stable21.1

[stable21.1] Allow other apps to register message actions

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

@@ -119,6 +119,16 @@ the main body of the message as well as a quote.
 						@click.stop="handleReply">
 						{{ t('spreed', 'Reply') }}
 					</ActionButton>
+					<template
+						v-for="action in messageActions">
+						<ActionButton
+							:key="action.label"
+							:icon="action.icon"
+							:close-after-click="true"
+							@click="action.callback(messageAPIData)">
+							{{ action.label }}
+						</ActionButton>
+					</template>
 				</Actions>
 			</div>
 		</div>
@@ -287,6 +297,10 @@ export default {
 	},
 
 	computed: {
+		messageObject() {
+			return this.$store.getters.message(this.token, this.id)
+		},
+
 		hasActions() {
 			return this.isReplyable && !this.isConversationReadOnly
 		},
@@ -432,6 +446,18 @@ export default {
 			return t('spreed', 'You can not send messages to this conversation at the moment')
 		},
 
+		messageActions() {
+			return this.$store.getters.messageActions
+		},
+
+		messageAPIData() {
+			return {
+				message: this.messageObject,
+				metadata: this.conversation,
+				apiVersion: 'v3',
+			}
+		},
+
 	},
 
 	watch: {

src/init.js

@@ -0,0 +1,48 @@
+/**
+ * @copyright Copyright (c) 2020 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author Marco Ambrosini <marcoambrosini@pm.me>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+// The purpose of this file is to wrap the logic shared by the different talk
+// entry points
+
+import store from './store'
+
+if (!window.OCA.Talk) {
+	window.OCA.Talk = {}
+}
+
+/**
+ * Frontend message API for adding actions to talk messages.
+ * @param {*} Object the wrapping object.
+ * @param {String} label the action label.
+ * @param {Function} callback the callback function. This function will receive
+ * the messageAPIData object as a parameter and be triggered by a click on the
+ * action.
+ * @param {String} icon the action label. E.g. "icon-reply"
+ */
+window.OCA.Talk.registerMessageAction = ({ label, callback, icon }) => {
+	const messageAction = {
+		label,
+		callback,
+		icon,
+	}
+	store.dispatch('addMessageAction', messageAction)
+}

src/main.js

@@ -24,6 +24,7 @@
 
 import Vue from 'vue'
 import App from './App'
+import './init'
 
 // Store
 import Vuex from 'vuex'

src/mainFilesSidebar.js

@@ -25,6 +25,7 @@
 import Vue from 'vue'
 import FilesSidebarCallViewApp from './FilesSidebarCallViewApp'
 import FilesSidebarTabApp from './FilesSidebarTabApp'
+import './init'
 
 // Store
 import Vuex from 'vuex'

src/mainFilesSidebarLoader.js

@@ -22,6 +22,7 @@
 
 import FilesSidebarCallView from './views/FilesSidebarCallView'
 import { leaveConversation } from './services/participantsService'
+import './init'
 
 const isEnabled = function(fileInfo) {
 	if (fileInfo && !fileInfo.isDirectory()) {

src/mainPublicShareAuthSidebar.js

@@ -21,6 +21,7 @@
 import Vue from 'vue'
 import PublicShareAuthRequestPasswordButton from './PublicShareAuthRequestPasswordButton'
 import PublicShareAuthSidebar from './PublicShareAuthSidebar'
+import './init'
 
 // Store
 import Vuex from 'vuex'

src/mainPublicShareSidebar.js

@@ -20,6 +20,7 @@
 
 import Vue from 'vue'
 import PublicShareSidebar from './PublicShareSidebar'
+import './init'
 
 // Store
 import Vuex from 'vuex'

src/store/index.js

@@ -36,6 +36,7 @@ import sidebarStore from './sidebarStore'
 import talkHashStore from './talkHashStore'
 import tokenStore from './tokenStore'
 import windowVisibilityStore from './windowVisibilityStore'
+import messageActionsStore from './messageActionsStore'
 
 Vue.use(Vuex)
 
@@ -57,6 +58,7 @@ export default new Store({
 		talkHashStore,
 		tokenStore,
 		windowVisibilityStore,
+		messageActionsStore,
 	},
 
 	mutations,

src/store/messageActionsStore.js

@@ -0,0 +1,44 @@
+/**
+ * @copyright Copyright (c) 2020 Marco Ambrosini <marcoambrosini@pm.me>
+ *
+ * @author Marco Ambrosini <marcoambrosini@pm.me>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+const state = {
+	messageActions: [],
+}
+
+const getters = {
+	messageActions: (state) => {
+		return state.messageActions
+	},
+}
+
+const mutations = {
+	addMessageAction(state, messageAction) {
+		state.messageActions.push(messageAction)
+	},
+}
+
+const actions = {
+	addMessageAction({ commit }, messageAction) {
+		commit('addMessageAction', messageAction)
+	},
+}
+
+export default { state, mutations, getters, actions }