feat(filepicker): add button to show slash commands

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>

2 files changed, 25 insertions, 3 deletions

diff --git a/src/components/NewMessage/NewMessage.vue b/src/components/NewMessage/NewMessage.vue
index e7f42a2eb..61d316b8f 100644
--- a/src/components/NewMessage/NewMessage.vue
+++ b/src/components/NewMessage/NewMessage.vue
@@ -542,6 +542,7 @@ export default {
 		EventBus.on('upload-start', this.handleUploadSideEffects)
 		EventBus.on('upload-discard', this.handleUploadSideEffects)
 		EventBus.on('retry-message', this.handleRetryMessage)
+		EventBus.on('smart-picker-open', this.handleOpenTributeMenu)
 
 		if (!this.$store.getters.areFileTemplatesInitialised) {
 			this.$store.dispatch('getFileTemplates')
@@ -553,6 +554,7 @@ export default {
 		EventBus.off('upload-start', this.handleUploadSideEffects)
 		EventBus.off('upload-discard', this.handleUploadSideEffects)
 		EventBus.off('retry-message', this.handleRetryMessage)
+		EventBus.off('smart-picker-open', this.handleOpenTributeMenu)
 	},
 
 	methods: {
@@ -764,6 +766,10 @@ export default {
 			})
 		},
 
+		handleOpenTributeMenu() {
+			this.$refs.richContenteditable.showTribute('/')
+		},
+
 		/**
 		 * Clicks the hidden file input when clicking the correspondent NcActionButton,
 		 * thus opening the file-picker
diff --git a/src/components/NewMessage/NewMessageAttachments.vue b/src/components/NewMessage/NewMessageAttachments.vue
index 98b64bd9f..42a997504 100644
--- a/src/components/NewMessage/NewMessageAttachments.vue
+++ b/src/components/NewMessage/NewMessageAttachments.vue
@@ -12,7 +12,7 @@
 		:aria-label="t('spreed', 'Share files to the conversation')"
 		:aria-haspopup="true">
 		<template #icon>
-			<Paperclip :size="16" />
+			<Plus :size="16" />
 		</template>
 
 		<NcActionButton v-if="canUploadFiles"
@@ -53,13 +53,22 @@
 			</template>
 			{{ t('spreed', 'Create new poll') }}
 		</NcActionButton>
+
+		<NcActionButton close-after-click
+			@click="showSmartPicker">
+			<template #icon>
+				<SlashForwardBox :size="20" />
+			</template>
+			{{ t('spreed', 'Smart picker') }}
+		</NcActionButton>
 	</NcActions>
 </template>
 
 <script>
 import Folder from 'vue-material-design-icons/Folder.vue'
-import Paperclip from 'vue-material-design-icons/Paperclip.vue'
+import Plus from 'vue-material-design-icons/Plus.vue'
 import PollIcon from 'vue-material-design-icons/Poll.vue'
+import SlashForwardBox from 'vue-material-design-icons/SlashForwardBox.vue'
 import Upload from 'vue-material-design-icons/Upload.vue'
 
 import { t } from '@nextcloud/l10n'
@@ -68,6 +77,8 @@ import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
 
+import { EventBus } from '../../services/EventBus.js'
+
 export default {
 	name: 'NewMessageAttachments',
 
@@ -77,8 +88,9 @@ export default {
 		NcIconSvgWrapper,
 		// Icons
 		Folder,
-		Paperclip,
+		Plus,
 		PollIcon,
+		SlashForwardBox,
 		Upload,
 	},
 
@@ -133,6 +145,10 @@ export default {
 
 	methods: {
 		t,
+
+		showSmartPicker() {
+			EventBus.emit('smart-picker-open')
+		},
 	},
 }
 </script>