From 6641989b7479e543334137d9569aff9c07f84492 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Thu, 20 Apr 2023 11:44:13 +0200
Subject: [PATCH 1/6] add adjustable overlap for condensed AvatarWrapper.vue,
 lint NewMessageForm.vue

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../AvatarWrapper/AvatarWrapper.vue           | 11 +++++--
 .../NewMessageForm/NewMessageForm.vue         | 30 +++++++++++--------
 2 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/src/components/AvatarWrapper/AvatarWrapper.vue b/src/components/AvatarWrapper/AvatarWrapper.vue
index 9f97bb7c8d7..4c625e7b93f 100644
--- a/src/components/AvatarWrapper/AvatarWrapper.vue
+++ b/src/components/AvatarWrapper/AvatarWrapper.vue
@@ -25,7 +25,8 @@
 			'avatar-wrapper--offline': offline,
 			'avatar-wrapper--small': small,
 			'avatar-wrapper--condensed': condensed,
-		}">
+		}"
+		:style="{'--condensed-overlap': condensedOverlap}">
 		<div v-if="iconClass"
 			class="icon"
 			:class="[`avatar-${size}px`, iconClass]" />
@@ -80,6 +81,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		condensedOverlap: {
+			type: Number,
+			default: 2,
+		},
 		offline: {
 			type: Boolean,
 			default: false,
@@ -134,7 +139,7 @@ export default {
 			if (this.isDeletedUser) {
 				return 'X'
 			}
-			const customName = this.name !== t('spreed', 'Guest') ? this.name : '?'
+			const customName = this.name?.trim() && this.name !== t('spreed', 'Guest') ? this.name : '?'
 			return customName.charAt(0)
 		},
 		menuContainerWithFallback() {
@@ -166,7 +171,7 @@ export default {
 	&--condensed {
 		width: unset;
 		height: unset;
-		margin-left: -2px;
+		margin-left: calc(var(--condensed-overlap) * -1px);
 		display: flex;
 
 		& > .icon,
diff --git a/src/components/NewMessageForm/NewMessageForm.vue b/src/components/NewMessageForm/NewMessageForm.vue
index e5052558bcf..839af4f193f 100644
--- a/src/components/NewMessageForm/NewMessageForm.vue
+++ b/src/components/NewMessageForm/NewMessageForm.vue
@@ -274,24 +274,25 @@ export default {
 	disableKeyboardShortcuts,
 
 	components: {
-		Quote,
-		NcActions,
+		AudioRecorder,
 		NcActionButton,
+		NcActions,
 		NcButton,
-		Paperclip,
 		NcEmojiPicker,
+		NcModal,
 		NcRichContenteditable,
-		EmoticonOutline,
-		Send,
-		AudioRecorder,
-		BellOff,
+		NcTextField,
+		Quote,
 		SimplePollsEditor,
-		Poll,
-		NcModal,
+		TemplatePreview,
+		// Icons
+		BellOff,
+		EmoticonOutline,
 		Folder,
+		Paperclip,
+		Poll,
+		Send,
 		Upload,
-		TemplatePreview,
-		NcTextField,
 	},
 
 	props: {
@@ -939,12 +940,14 @@ export default {
 	width: 100%;
 	display: flex;
 	justify-content: center;
+
 	&-form {
 		align-items: flex-end;
 		display: flex;
-		position:relative;
+		position: relative;
 		flex: 0 1 700px;
 		margin: 0 4px;
+
 		&__emoji-picker {
 			position: absolute;
 			bottom: 1px;
@@ -963,6 +966,7 @@ export default {
 			border-radius: calc(var(--default-clickable-area) / 2);
 			padding: 8px 16px 8px 44px;
 			max-height: 180px;
+
 			&:hover,
 			&:focus,
 			&:active {
@@ -994,10 +998,12 @@ export default {
 // Targeting two classess for specificity
 :deep(.action-item__menutoggle.action-item__menutoggle--with-icon-slot) {
 	opacity: 1 !important;
+
 	&:hover,
 	&:focus {
 		background-color: var(--color-background-hover) !important;
 	}
+
 	&:disabled {
 		opacity: .5 !important;
 	}

From 7f51262ce668d95543cb3a6461588234413496e5 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Thu, 20 Apr 2023 12:21:44 +0200
Subject: [PATCH 2/6] add TypingIndicator.vue

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

- declare translatePlural in d.ts file, improve indicator message
- remove HTML tags from direct translations
- escape HTML markdown in participant names
---
 src/components/ChatView.vue                   |   1 +
 .../NewMessageForm/NewMessageForm.vue         |  22 ++-
 .../TypingIndicator/TypingIndicator.vue       | 161 ++++++++++++++++++
 src/types/vendor/l10n.d.ts                    |   6 +-
 4 files changed, 187 insertions(+), 3 deletions(-)
 create mode 100644 src/components/TypingIndicator/TypingIndicator.vue

diff --git a/src/components/ChatView.vue b/src/components/ChatView.vue
index 5f83886341d..480dbca19e1 100644
--- a/src/components/ChatView.vue
+++ b/src/components/ChatView.vue
@@ -46,6 +46,7 @@
 			role="region"
 			:token="token"
 			:container="containerId"
+			has-typing-indicator
 			:aria-label="t('spreed', 'Post message')" />
 	</div>
 </template>
diff --git a/src/components/NewMessageForm/NewMessageForm.vue b/src/components/NewMessageForm/NewMessageForm.vue
index 839af4f193f..4f42dd5376a 100644
--- a/src/components/NewMessageForm/NewMessageForm.vue
+++ b/src/components/NewMessageForm/NewMessageForm.vue
@@ -21,7 +21,10 @@
 -->
 
 <template>
-	<div class="wrapper">
+	<div class="wrapper" :class="{'wrapper--has-typing-indicator': hasTypingIndicator}">
+		<TypingIndicator v-if="hasTypingIndicator"
+			:token="token" />
+
 		<!--native file picker, hidden -->
 		<input id="file-upload"
 			ref="fileUploadInput"
@@ -244,6 +247,7 @@ import NcRichContenteditable from '@nextcloud/vue/dist/Components/NcRichContente
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
 import Quote from '../Quote.vue'
+import TypingIndicator from '../TypingIndicator/TypingIndicator.vue'
 import AudioRecorder from './AudioRecorder/AudioRecorder.vue'
 import SimplePollsEditor from './SimplePollsEditor/SimplePollsEditor.vue'
 import TemplatePreview from './TemplatePreview.vue'
@@ -285,6 +289,7 @@ export default {
 		Quote,
 		SimplePollsEditor,
 		TemplatePreview,
+		TypingIndicator,
 		// Icons
 		BellOff,
 		EmoticonOutline,
@@ -329,6 +334,14 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+
+		/**
+		 * Show an indicator if someone is currently typing a message.
+		 */
+		hasTypingIndicator: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	emits: ['sent', 'failure'],
@@ -930,10 +943,15 @@ export default {
 @import '../../assets/variables';
 
 .wrapper {
+	position: relative;
 	display: flex;
 	justify-content: center;
-	padding: 12px 0;
+	padding: 12px 0 12px;
 	min-height: 69px;
+
+	&--has-typing-indicator {
+		padding: 30px 0 12px;
+	}
 }
 
 .new-message {
diff --git a/src/components/TypingIndicator/TypingIndicator.vue b/src/components/TypingIndicator/TypingIndicator.vue
new file mode 100644
index 00000000000..7e7960a87b7
--- /dev/null
+++ b/src/components/TypingIndicator/TypingIndicator.vue
@@ -0,0 +1,161 @@
+<!--
+  - @copyright Copyright (c) 2023 Maksim Sukharev <antreesy.web@gmail.com>
+  -
+  - @author Maksim Sukharev <antreesy.web@gmail.com>
+  -
+  - @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/>.
+-->
+
+<template>
+	<div v-show="typingParticipants.length" class="indicator">
+		<div class="indicator__wrapper">
+			<div class="indicator__avatars">
+				<AvatarWrapper v-for="(participant, index) in visibleParticipants"
+					:id="participant.actorId"
+					:key="index"
+					:name="participant.displayName"
+					:source="participant.actorType"
+					small
+					condensed
+					:condensed-overlap="8"
+					disable-menu
+					disable-tooltip />
+			</div>
+			<p class="indicator__main" v-html="indicatorMessage" />
+		</div>
+	</div>
+</template>
+
+<script>
+import escapeHtml from 'escape-html'
+
+import AvatarWrapper from '../AvatarWrapper/AvatarWrapper.vue'
+
+export default {
+	name: 'TypingIndicator',
+	components: { AvatarWrapper },
+
+	props: {
+		/**
+		 * The conversation token
+		 */
+		token: {
+			type: String,
+			required: true,
+		},
+	},
+
+	computed: {
+		participants() {
+			return this.$store.getters.participantsList(this.token).filter(participant => {
+				return participant.actorId !== this.$store.getters.getActorId()
+			})
+		},
+
+		typingParticipants() {
+			// TODO implement signal receiving here
+			return this.participants
+		},
+
+		visibleParticipants() {
+			return this.typingParticipants.slice(0, 3)
+		},
+
+		hiddenParticipantsCount() {
+			return this.typingParticipants.slice(3).length
+		},
+
+		indicatorMessage() {
+			if (!this.typingParticipants) {
+				return ''
+			}
+
+			const [user1, user2, user3] = this.prepareNamesList()
+
+			if (this.typingParticipants.length === 1) {
+				return t('spreed', '{user1} is typing...',
+					{ user1 }, undefined, { escape: false })
+			}
+
+			if (this.typingParticipants.length === 2) {
+				return t('spreed', '{user1} and {user2} are typing...',
+					{ user1, user2 }, undefined, { escape: false })
+			}
+
+			if (this.typingParticipants.length === 3) {
+				return t('spreed', '{user1}, {user2} and {user3} are typing...',
+					{ user1, user2, user3 }, undefined, { escape: false })
+			}
+
+			return n('spreed', '{user1}, {user2}, {user3} and %n other are typing...',
+				'{user1}, {user2}, {user3} and %n others are typing...',
+				this.hiddenParticipantsCount, { user1, user2, user3 }, { escape: false })
+		},
+	},
+
+	methods: {
+		prepareNamesList() {
+			return this.visibleParticipants.reverse()
+				.map(participant => this.getParticipantName(participant))
+				.map(name => name ? `<strong>${escapeHtml(name)}</strong>` : undefined)
+		},
+
+		// TODO implement model from signaling here
+		getParticipantName(participant) {
+			if (participant?.displayName) {
+				return participant.displayName
+			}
+
+			return this.$store.getters.getGuestName(this.token, participant.actorId)
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.indicator {
+	position: absolute;
+	top: 4px;
+	left: 0;
+	width: 100%;
+	padding-right: 12px;
+
+	&__wrapper {
+		max-width: 800px;
+		display: flex;
+		align-items: center;
+		margin: auto;
+		padding: 0;
+		line-height: 120%;
+		color: var(--color-text-maxcontrast);
+	}
+
+	&__avatars {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-direction: row-reverse;
+		flex-shrink: 0;
+		width: 52px;
+		padding-left: 8px;
+	}
+
+	&__main {
+		width: 100%;
+		padding-left: 8px;
+	}
+}
+</style>
diff --git a/src/types/vendor/l10n.d.ts b/src/types/vendor/l10n.d.ts
index eb0ef95f191..f61a9dd4e27 100644
--- a/src/types/vendor/l10n.d.ts
+++ b/src/types/vendor/l10n.d.ts
@@ -1 +1,5 @@
-declare function t(app: string, string: string, vars?: { [key: string]: string }, count?: number, options?: any): string;
+// TODO re-declare functions from upstream library
+// import { translate, translatePlural } from '@nextcloud/l10n/dist/translation.d.ts'
+
+declare function t(app: string, text: string, vars?: { [key: string]: string }, number?: number, options?: any): string;
+declare function n(app: string, textSingular: string, textPlural: string, number: number, vars?: { [key: string]: string }, options?: any): string;

From 887c2a03c9d7cc52edfcbc92057feb37aa95e705 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Thu, 4 May 2023 09:39:03 +0200
Subject: [PATCH 3/6] connect signaling

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/NewMessageForm/NewMessageForm.vue   | 14 ++++++++++++++
 src/components/TypingIndicator/TypingIndicator.vue |  9 ++-------
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/components/NewMessageForm/NewMessageForm.vue b/src/components/NewMessageForm/NewMessageForm.vue
index 4f42dd5376a..13cfd396e7a 100644
--- a/src/components/NewMessageForm/NewMessageForm.vue
+++ b/src/components/NewMessageForm/NewMessageForm.vue
@@ -368,6 +368,7 @@ export default {
 			checked: -1,
 			userData: {},
 			clipboardTimeStamp: null,
+			typingTimeout: null,
 		}
 	},
 
@@ -506,6 +507,18 @@ export default {
 
 		text(newValue) {
 			this.$store.dispatch('setCurrentMessageInput', { token: this.token, text: newValue })
+
+			clearTimeout(this.typingTimeout)
+
+			if (!newValue) {
+				this.$store.dispatch('setTyping', { typing: false })
+				return
+			}
+
+			this.typingTimeout = setTimeout(() => {
+				this.$store.dispatch('setTyping', { typing: false })
+			}, 5000)
+			this.$store.dispatch('setTyping', { typing: true })
 		},
 
 		token(token) {
@@ -514,6 +527,7 @@ export default {
 			} else {
 				this.text = ''
 			}
+			this.$store.dispatch('setTyping', { typing: false })
 		},
 
 		showTextFileDialog(newValue) {
diff --git a/src/components/TypingIndicator/TypingIndicator.vue b/src/components/TypingIndicator/TypingIndicator.vue
index 7e7960a87b7..108c73e3802 100644
--- a/src/components/TypingIndicator/TypingIndicator.vue
+++ b/src/components/TypingIndicator/TypingIndicator.vue
@@ -59,17 +59,12 @@ export default {
 	},
 
 	computed: {
-		participants() {
-			return this.$store.getters.participantsList(this.token).filter(participant => {
+		typingParticipants() {
+			return this.$store.getters.participantsListTyping(this.token).filter(participant => {
 				return participant.actorId !== this.$store.getters.getActorId()
 			})
 		},
 
-		typingParticipants() {
-			// TODO implement signal receiving here
-			return this.participants
-		},
-
 		visibleParticipants() {
 			return this.typingParticipants.slice(0, 3)
 		},

From 9dd56210c803a0a9cf3315a0a6df5ee8a343596f Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Fri, 5 May 2023 20:33:40 +0200
Subject: [PATCH 4/6] add capabilities check

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../NewMessageForm/NewMessageForm.vue         | 37 +++++++++++------
 .../SettingsDialog/SettingsDialog.vue         | 40 +++++++++++++++++++
 src/services/settingsService.js               | 14 +++++++
 src/store/settingsStore.js                    | 20 +++++++++-
 4 files changed, 97 insertions(+), 14 deletions(-)

diff --git a/src/components/NewMessageForm/NewMessageForm.vue b/src/components/NewMessageForm/NewMessageForm.vue
index 13cfd396e7a..c7e558dfb5d 100644
--- a/src/components/NewMessageForm/NewMessageForm.vue
+++ b/src/components/NewMessageForm/NewMessageForm.vue
@@ -21,8 +21,8 @@
 -->
 
 <template>
-	<div class="wrapper" :class="{'wrapper--has-typing-indicator': hasTypingIndicator}">
-		<TypingIndicator v-if="hasTypingIndicator"
+	<div class="wrapper" :class="{'wrapper--has-typing-indicator': showTypingStatus}">
+		<NewMessageFormTypingIndicator v-if="showTypingStatus"
 			:token="token" />
 
 		<!--native file picker, hidden -->
@@ -253,7 +253,7 @@ import SimplePollsEditor from './SimplePollsEditor/SimplePollsEditor.vue'
 import TemplatePreview from './TemplatePreview.vue'
 
 import { useViewer } from '../../composables/useViewer.js'
-import { CONVERSATION, PARTICIPANT } from '../../constants.js'
+import { CONVERSATION, PARTICIPANT, PRIVACY } from '../../constants.js'
 import { EventBus } from '../../services/EventBus.js'
 import { shareFile, createTextFile } from '../../services/filesSharingServices.js'
 import { searchPossibleMentions } from '../../services/mentionsService.js'
@@ -271,6 +271,7 @@ const margin = 8
 const width = margin * 20
 
 const disableKeyboardShortcuts = OCP.Accessibility.disableKeyboardShortcuts()
+const supportTypingStatus = getCapabilities()?.spreed?.config?.chat?.['typing-privacy'] !== undefined
 
 export default {
 	name: 'NewMessageForm',
@@ -350,7 +351,10 @@ export default {
 
 	setup() {
 		const { openViewer } = useViewer()
-		return { openViewer }
+		return {
+			openViewer,
+			supportTypingStatus,
+		}
 	},
 
 	data() {
@@ -498,6 +502,10 @@ export default {
 		showAudioRecorder() {
 			return !this.hasText && this.canUploadFiles && !this.broadcast
 		},
+		showTypingStatus() {
+			return this.hasTypingIndicator && this.supportTypingStatus
+				&& this.$store.getters.getTypingStatusPrivacy() === PRIVACY.PUBLIC
+		},
 	},
 
 	watch: {
@@ -508,17 +516,20 @@ export default {
 		text(newValue) {
 			this.$store.dispatch('setCurrentMessageInput', { token: this.token, text: newValue })
 
-			clearTimeout(this.typingTimeout)
+			// Enable signal sending, only if indicator for this input is on
+			if (this.showTypingStatus) {
+				clearTimeout(this.typingTimeout)
 
-			if (!newValue) {
-				this.$store.dispatch('setTyping', { typing: false })
-				return
-			}
+				if (!newValue) {
+					this.$store.dispatch('setTyping', { typing: false })
+					return
+				}
 
-			this.typingTimeout = setTimeout(() => {
-				this.$store.dispatch('setTyping', { typing: false })
-			}, 5000)
-			this.$store.dispatch('setTyping', { typing: true })
+				this.typingTimeout = setTimeout(() => {
+					this.$store.dispatch('setTyping', { typing: false })
+				}, 5000)
+				this.$store.dispatch('setTyping', { typing: true })
+			}
 		},
 
 		token(token) {
diff --git a/src/components/SettingsDialog/SettingsDialog.vue b/src/components/SettingsDialog/SettingsDialog.vue
index ea6e5f86e8f..127f56d60e9 100644
--- a/src/components/SettingsDialog/SettingsDialog.vue
+++ b/src/components/SettingsDialog/SettingsDialog.vue
@@ -60,6 +60,15 @@
 				@update:checked="toggleReadStatusPrivacy">
 				{{ t('spreed', 'Share my read-status and show the read-status of others') }}
 			</NcCheckboxRadioSwitch>
+			<NcCheckboxRadioSwitch v-if="supportTypingStatus"
+				id="typing_status_privacy"
+				:checked="typingStatusPrivacyIsPublic"
+				:disabled="privacyLoading"
+				type="switch"
+				class="checkbox"
+				@update:checked="toggleTypingStatusPrivacy">
+				{{ t('spreed', 'Share my typing-status and show the typing-status of others') }}
+			</NcCheckboxRadioSwitch>
 		</NcAppSettingsSection>
 		<NcAppSettingsSection id="sounds"
 			:title="t('spreed', 'Sounds')"
@@ -145,6 +154,7 @@
 </template>
 
 <script>
+import { getCapabilities } from '@nextcloud/capabilities'
 import { getFilePickerBuilder, showError, showSuccess } from '@nextcloud/dialogs'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { generateUrl } from '@nextcloud/router'
@@ -159,6 +169,8 @@ import MediaDevicesPreview from '../MediaDevicesPreview.vue'
 
 import { PRIVACY } from '../../constants.js'
 
+const supportTypingStatus = getCapabilities()?.spreed?.config?.chat?.['typing-privacy'] !== undefined
+
 export default {
 	name: 'SettingsDialog',
 
@@ -171,6 +183,12 @@ export default {
 		NcTextField,
 	},
 
+	setup() {
+		return {
+			supportTypingStatus,
+		}
+	},
+
 	data() {
 		return {
 			showSettings: false,
@@ -209,6 +227,14 @@ export default {
 			return this.$store.getters.getReadStatusPrivacy()
 		},
 
+		typingStatusPrivacyIsPublic() {
+			return this.typingStatusPrivacy === PRIVACY.PUBLIC
+		},
+
+		typingStatusPrivacy() {
+			return this.$store.getters.getTypingStatusPrivacy()
+		},
+
 		settingsUrl() {
 			return generateUrl('/settings/user/notifications')
 		},
@@ -265,6 +291,20 @@ export default {
 			this.privacyLoading = false
 		},
 
+		async toggleTypingStatusPrivacy() {
+			this.privacyLoading = true
+			try {
+				await this.$store.dispatch(
+					'updateTypingStatusPrivacy',
+					this.typingStatusPrivacyIsPublic ? PRIVACY.PRIVATE : PRIVACY.PUBLIC
+				)
+				showSuccess(t('spreed', 'Your privacy setting has been saved'))
+			} catch (exception) {
+				showError(t('spreed', 'Error while setting typing status privacy'))
+			}
+			this.privacyLoading = false
+		},
+
 		async togglePlaySounds() {
 			this.playSoundsLoading = true
 			try {
diff --git a/src/services/settingsService.js b/src/services/settingsService.js
index 422d73a4a2f..27004390aa8 100644
--- a/src/services/settingsService.js
+++ b/src/services/settingsService.js
@@ -51,6 +51,19 @@ const setReadStatusPrivacy = async function(privacy) {
 	})
 }
 
+/**
+ * Sets the typing status privacy setting for the user
+ *
+ * @param {number} privacy The selected value, either 0 or 1
+ * @return {object} The axios response
+ */
+const setTypingStatusPrivacy = async function(privacy) {
+	return axios.post(generateOcsUrl('apps/spreed/api/v1/settings/user'), {
+		key: 'typing_privacy',
+		value: privacy,
+	})
+}
+
 /**
  * Save the SIP settings
  *
@@ -82,6 +95,7 @@ const setPlaySounds = async function(isGuest, enabled) {
 export {
 	setAttachmentFolder,
 	setReadStatusPrivacy,
+	setTypingStatusPrivacy,
 	setSIPSettings,
 	setPlaySounds,
 }
diff --git a/src/store/settingsStore.js b/src/store/settingsStore.js
index 46970b89810..20a761d8fb8 100644
--- a/src/store/settingsStore.js
+++ b/src/store/settingsStore.js
@@ -21,16 +21,20 @@
 import { loadState } from '@nextcloud/initial-state'
 
 import { PRIVACY } from '../constants.js'
-import { setReadStatusPrivacy } from '../services/settingsService.js'
+import { setReadStatusPrivacy, setTypingStatusPrivacy } from '../services/settingsService.js'
 
 const state = {
 	readStatusPrivacy: loadState('spreed', 'read_status_privacy', PRIVACY.PRIVATE),
+	typingStatusPrivacy: loadState('spreed', 'typing_privacy', PRIVACY.PRIVATE),
 }
 
 const getters = {
 	getReadStatusPrivacy: (state) => () => {
 		return state.readStatusPrivacy
 	},
+	getTypingStatusPrivacy: (state) => () => {
+		return state.typingStatusPrivacy
+	},
 }
 
 const mutations = {
@@ -43,6 +47,9 @@ const mutations = {
 	updateReadStatusPrivacy(state, privacy) {
 		state.readStatusPrivacy = privacy
 	},
+	updateTypingStatusPrivacy(state, privacy) {
+		state.typingStatusPrivacy = privacy
+	},
 }
 
 const actions = {
@@ -57,6 +64,17 @@ const actions = {
 		await setReadStatusPrivacy(privacy)
 		context.commit('updateReadStatusPrivacy', privacy)
 	},
+
+	/**
+	 * Update the typing status privacy for the user
+	 *
+	 * @param {object} context default store context;
+	 * @param {number} privacy The new selected privacy
+	 */
+	async updateTypingStatusPrivacy(context, privacy) {
+		await setTypingStatusPrivacy(privacy)
+		context.commit('updateTypingStatusPrivacy', privacy)
+	},
 }
 
 export default { state, mutations, getters, actions }

From 108cdde1de1ca8e5939d5967c2845f9f7712fe8a Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Fri, 5 May 2023 22:48:42 +0200
Subject: [PATCH 5/6] handle indicator for guests

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../SettingsDialog/SettingsDialog.vue         |  2 +-
 .../TypingIndicator/TypingIndicator.vue       | 30 +++++++++++++++----
 src/store/participantsStore.js                | 18 ++++++++++-
 3 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/src/components/SettingsDialog/SettingsDialog.vue b/src/components/SettingsDialog/SettingsDialog.vue
index 127f56d60e9..5e8ed454fde 100644
--- a/src/components/SettingsDialog/SettingsDialog.vue
+++ b/src/components/SettingsDialog/SettingsDialog.vue
@@ -44,7 +44,7 @@
 					@click="selectAttachmentFolder" />
 				<NcButton type="primary"
 					@click="selectAttachmentFolder">
-					{{ t('spreed', 'Browse…') }}
+					{{ t('spreed', 'Browse …') }}
 				</NcButton>
 			</div>
 		</NcAppSettingsSection>
diff --git a/src/components/TypingIndicator/TypingIndicator.vue b/src/components/TypingIndicator/TypingIndicator.vue
index 108c73e3802..f7cbba41af7 100644
--- a/src/components/TypingIndicator/TypingIndicator.vue
+++ b/src/components/TypingIndicator/TypingIndicator.vue
@@ -20,7 +20,7 @@
 -->
 
 <template>
-	<div v-show="typingParticipants.length" class="indicator">
+	<div v-show="showIndicatorMessage" class="indicator">
 		<div class="indicator__wrapper">
 			<div class="indicator__avatars">
 				<AvatarWrapper v-for="(participant, index) in visibleParticipants"
@@ -59,6 +59,14 @@ export default {
 	},
 
 	computed: {
+		isGuest() {
+			return this.$store.getters.getActorType() === 'guests'
+		},
+
+		externalTypingSignals() {
+			return this.$store.getters.externalTypingSignals(this.token)
+		},
+
 		typingParticipants() {
 			return this.$store.getters.participantsListTyping(this.token).filter(participant => {
 				return participant.actorId !== this.$store.getters.getActorId()
@@ -73,7 +81,17 @@ export default {
 			return this.typingParticipants.slice(3).length
 		},
 
+		showIndicatorMessage() {
+			return this.isGuest
+				? !!this.externalTypingSignals.length
+				: !!this.typingParticipants.length
+		},
+
 		indicatorMessage() {
+			if (this.isGuest) {
+				return t('spreed', 'Someone is typing …')
+			}
+
 			if (!this.typingParticipants) {
 				return ''
 			}
@@ -81,22 +99,22 @@ export default {
 			const [user1, user2, user3] = this.prepareNamesList()
 
 			if (this.typingParticipants.length === 1) {
-				return t('spreed', '{user1} is typing...',
+				return t('spreed', '{user1} is typing …',
 					{ user1 }, undefined, { escape: false })
 			}
 
 			if (this.typingParticipants.length === 2) {
-				return t('spreed', '{user1} and {user2} are typing...',
+				return t('spreed', '{user1} and {user2} are typing …',
 					{ user1, user2 }, undefined, { escape: false })
 			}
 
 			if (this.typingParticipants.length === 3) {
-				return t('spreed', '{user1}, {user2} and {user3} are typing...',
+				return t('spreed', '{user1}, {user2} and {user3} are typing …',
 					{ user1, user2, user3 }, undefined, { escape: false })
 			}
 
-			return n('spreed', '{user1}, {user2}, {user3} and %n other are typing...',
-				'{user1}, {user2}, {user3} and %n others are typing...',
+			return n('spreed', '{user1}, {user2}, {user3} and %n other are typing …',
+				'{user1}, {user2}, {user3} and %n others are typing …',
 				this.hiddenParticipantsCount, { user1, user2, user3 }, { escape: false })
 		},
 	},
diff --git a/src/store/participantsStore.js b/src/store/participantsStore.js
index 7a43f963615..3a3706d90bd 100644
--- a/src/store/participantsStore.js
+++ b/src/store/participantsStore.js
@@ -81,6 +81,22 @@ const getters = {
 		return []
 	},
 
+	/**
+	 * Gets the array of external session ids.
+	 *
+	 * @param {object} state - the state object.
+	 * @param {object} rootState - the root state object.
+	 * @return {Array} the typing session IDs array.
+	 */
+	externalTypingSignals: (state, rootState) => (token) => {
+		if (state.typing[token]) {
+			return Object.values(state.typing[token]).filter(id => {
+				return rootState.getSessionId() !== id
+			})
+		}
+		return []
+	},
+
 	/**
 	 * Gets the participants array filtered to include only those that are
 	 * currently typing.
@@ -91,7 +107,7 @@ const getters = {
 	 * store).
 	 */
 	participantsListTyping: (state, getters) => (token) => {
-		if (!state.typing[token]) {
+		if (!state.typing[token]?.length) {
 			return []
 		}
 

From f3a0c4fba98518675ac2212483a741e615d298ef Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Fri, 5 May 2023 22:53:35 +0200
Subject: [PATCH 6/6] move and rename component according to Vue style guide

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/NewMessageForm/NewMessageForm.vue              | 4 ++--
 .../NewMessageFormTypingIndicator.vue}                        | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)
 rename src/components/{TypingIndicator/TypingIndicator.vue => NewMessageForm/NewMessageFormTypingIndicator.vue} (99%)

diff --git a/src/components/NewMessageForm/NewMessageForm.vue b/src/components/NewMessageForm/NewMessageForm.vue
index c7e558dfb5d..146518a3f17 100644
--- a/src/components/NewMessageForm/NewMessageForm.vue
+++ b/src/components/NewMessageForm/NewMessageForm.vue
@@ -247,8 +247,8 @@ import NcRichContenteditable from '@nextcloud/vue/dist/Components/NcRichContente
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
 import Quote from '../Quote.vue'
-import TypingIndicator from '../TypingIndicator/TypingIndicator.vue'
 import AudioRecorder from './AudioRecorder/AudioRecorder.vue'
+import NewMessageFormTypingIndicator from './NewMessageFormTypingIndicator.vue'
 import SimplePollsEditor from './SimplePollsEditor/SimplePollsEditor.vue'
 import TemplatePreview from './TemplatePreview.vue'
 
@@ -287,10 +287,10 @@ export default {
 		NcModal,
 		NcRichContenteditable,
 		NcTextField,
+		NewMessageFormTypingIndicator,
 		Quote,
 		SimplePollsEditor,
 		TemplatePreview,
-		TypingIndicator,
 		// Icons
 		BellOff,
 		EmoticonOutline,
diff --git a/src/components/TypingIndicator/TypingIndicator.vue b/src/components/NewMessageForm/NewMessageFormTypingIndicator.vue
similarity index 99%
rename from src/components/TypingIndicator/TypingIndicator.vue
rename to src/components/NewMessageForm/NewMessageFormTypingIndicator.vue
index f7cbba41af7..05c2392f759 100644
--- a/src/components/TypingIndicator/TypingIndicator.vue
+++ b/src/components/NewMessageForm/NewMessageFormTypingIndicator.vue
@@ -45,7 +45,7 @@ import escapeHtml from 'escape-html'
 import AvatarWrapper from '../AvatarWrapper/AvatarWrapper.vue'
 
 export default {
-	name: 'TypingIndicator',
+	name: 'NewMessageFormTypingIndicator',
 	components: { AvatarWrapper },
 
 	props: {