Show chat view in chat tab in Files app

When the Talk sidebar is supported for a file a message is shown to the
user to explicitly join the conversation, and once joined the chat view
is shown in the chat tab. If a different file is selected the previous
conversation is left (even if the conversation for the new file is not
joined).

The sidebar tabs are created again whenever the sidebar is opened, be it
when changing to a different file or even when opening the sidebar again
for the same file after closing it. As the file of the current
conversation needs to be known to leave the conversation or not when the
FileInfo changes (so it is left if it is opened in a different file, but
kept if opened in the same file) the file ID of the current conversation
needs to be stored outside of the view.

Finally, as the AdvancedInput in shown in the chat view but there is no
route in use "this.$route.name" needs to be guarded.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>

1 files changed, 45 insertions, 4 deletions

diff --git a/src/FilesSidebarTabApp.vue b/src/FilesSidebarTabApp.vue
index 82e6c7c42..36075ad93 100644
--- a/src/FilesSidebarTabApp.vue
+++ b/src/FilesSidebarTabApp.vue
@@ -35,22 +35,34 @@
 				{{ t('spreed', 'Share this file') }}
 			</button>
 		</div>
-		<p v-else>
-			Talk tab coming soon
-		</p>
+		<div v-else-if="isTalkSidebarSupportedForFile && !token" class="emptycontent room-not-joined">
+			<div class="icon icon-talk" />
+			<h2>{{ t('spreed', 'Discuss this file') }}</h2>
+			<button class="primary" @click="joinConversation">
+				{{ t('spreed', 'Join conversation') }}
+			</button>
+		</div>
+		<ChatView v-else :token="token" />
 	</div>
 </template>
 
 <script>
 
 import { getFileConversation } from './services/filesIntegrationServices'
+import { joinConversation, leaveConversation } from './services/participantsService'
 import CancelableRequest from './utils/cancelableRequest'
+import { getCurrentUser } from '@nextcloud/auth'
 import Axios from '@nextcloud/axios'
+import ChatView from './components/ChatView'
 
 export default {
 
 	name: 'FilesSidebarTabApp',
 
+	components: {
+		ChatView,
+	},
+
 	data() {
 		return {
 			// needed for reactivity
@@ -73,18 +85,44 @@ export default {
 		token() {
 			return this.$store.getters.getToken()
 		},
+		fileIdForToken() {
+			return this.$store.getters.getFileIdForToken()
+		},
 	},
 
 	watch: {
 		fileInfo: {
 			immediate: true,
 			handler(fileInfo) {
+				if (this.token && (!fileInfo || fileInfo.id !== this.fileIdForToken)) {
+					this.leaveConversation()
+				}
+
 				this.setTalkSidebarSupportedForFile(fileInfo)
 			},
 		},
 	},
 
+	beforeMount() {
+		this.$store.dispatch('setCurrentUser', getCurrentUser())
+	},
+
 	methods: {
+		async joinConversation() {
+			await this.getFileConversation()
+
+			joinConversation(this.token)
+		},
+
+		leaveConversation() {
+			leaveConversation(this.token)
+
+			this.$store.dispatch('updateTokenAndFileIdForToken', {
+				newToken: null,
+				newFileId: null,
+			})
+		},
+
 		async getFileConversation() {
 			// Clear previous requests if there's one pending
 			this.cancelGetFileConversation('canceled')
@@ -95,7 +133,10 @@ export default {
 			// Make the request
 			try {
 				const response = await request({ fileId: this.fileId })
-				this.$store.dispatch('updateToken', response.data.ocs.data.token)
+				this.$store.dispatch('updateTokenAndFileIdForToken', {
+					newToken: response.data.ocs.data.token,
+					newFileId: this.fileId,
+				})
 			} catch (exception) {
 				if (Axios.isCancel(exception)) {
 					console.debug('The request has been canceled', exception)