feat(chat states): Send chat state (XEP-0085)

README.md

@@ -33,7 +33,7 @@ Lightweight web chat client for XMPP server.
 - Retrieve contacts (roster) and bookmarked rooms (XEP-0048),
 - Send and receive files over HTTP (XEP-0066, XEP-0363),
 - Handle password protected room,
-- Display chat state notifications: is composing, is paused (XEP-0085),
+- Display and send chat state notifications: is composing, is paused (XEP-0085),
 - Format messages: bold, italic, striked, link and code inline/block (XEP-0393),
 - Pick emoji,
 - Room creation and configuration,

src/assets/styles.scss

@@ -173,6 +173,10 @@ body,
 	user-select: all;
 }
 
+.has-no-wrap {
+	white-space: nowrap;
+}
+
 .messages-container {
 	overflow-y: auto;
 	scroll-behavior: smooth;

src/components/Chat.vue

@@ -98,6 +98,7 @@ export default {
     ...mapState(useStore, [
       'activeChat',
       'messages',
+      'isSendingInactiveChatStates',
     ]),
     hasGuestInviteLink () {
       return window.config.hasGuestAccess && this.isRoom
@@ -112,6 +113,22 @@ export default {
     // handle route prop
     this.handleRoute()
   },
+  async beforeUnmount () {
+    if (!this.userJid) {
+      // $xmpp is not loaded
+      return
+    }
+    if (!this.isSendingInactiveChatStates) {
+      // the user has not opted in
+      return
+    }
+    // notify leaving discussion
+    try {
+      await this.$xmpp.sendChatState(this.jid, this.isRoom, 'inactive')
+    } catch (error) {
+      console.warn(error.message)
+    }
+  },
   methods: {
     // check if a jid is current user (including MUC nick)
     isUser (jid) {

src/components/Home.vue

@@ -11,7 +11,7 @@
       <contacts :is-expanded="isExpanded" />
       <version v-if="isExpanded" />
     </aside>
-    <router-view class="is-flex-grow-1" />
+    <router-view :key="$route.fullPath" class="is-flex-grow-1" />
   </div>
 </template>
 

src/components/NotificationsSwitch.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="isNotificationsSupported">
-    <o-switch v-model="hasNotificationsEnabledSwitch" title="Allow the browser to send you notifications when you miss messages">Notifications</o-switch>
+    <o-switch v-model="hasNotificationsEnabledSwitch" title="Allow the browser to send you notifications when you miss messages" class="has-no-wrap"><span class="icon mr-1"><i class="fa fa-bell-ringing fa-fw" aria-hidden="true" /></span>Notifications</o-switch>
   </div>
 </template>
 

src/components/PresenceController.vue

@@ -9,9 +9,15 @@
         <a v-for="presenceOption in ['chat', 'away', 'dnd']" :key="presenceOption" :class="[{ 'is-active': presenceOption === presence }, isNavbarItem ? 'navbar-item' : 'dropdown-item']" @click="setPresence(presenceOption)"><presence :presence="presenceOption" /></a>
         <hr :class="[isNavbarItem ? 'navbar-divider' : 'dropdown-divider']">
         <div :class="[isNavbarItem ? 'navbar-item' : 'dropdown-item']">
-          <o-switch v-model="isAutoPresence" title="You will be seen away when the browser is not active" @change="setAutoPresence">Set away when inactive</o-switch>
+          <o-switch v-model="isAutoPresence" title="You will be seen away when the browser is not active" class="has-no-wrap" @change="setAutoPresence"><span class="icon mr-1"><i class="fa fa-moon-o fa-fw" aria-hidden="true" /></span>Set away when inactive</o-switch>
         </div>
         <notifications-switch :class="[isNavbarItem ? 'navbar-item' : 'dropdown-item']" />
+        <div :class="[isNavbarItem ? 'navbar-item' : 'dropdown-item']">
+          <o-switch v-model="isSendingTypingChatStatesSwitch" title="Notify your partner(s) that you are typing or paused" class="has-no-wrap"><span class="icon mr-1"><i class="fa fa-pencil-square-o fa-fw" aria-hidden="true" /></span>Send typing states</o-switch>
+        </div>
+        <div :class="[isNavbarItem ? 'navbar-item' : 'dropdown-item']">
+          <o-switch v-model="isSendingInactiveChatStatesSwitch" title="Notify your partner(s) that you are not looking the conversation" class="has-no-wrap"><span class="icon mr-1"><i class="fa fa-eye-slash fa-fw" aria-hidden="true" /></span>Send inactive chat states</o-switch>
+        </div>
       </div>
     </div>
   </div>
@@ -20,9 +26,12 @@
 <script>
 import presence from '../components/Presence.vue'
 import NotificationsSwitch from '../components/NotificationsSwitch.vue'
-import { mapState } from 'pinia'
+import { mapState, mapWritableState } from 'pinia'
 import { useStore } from '@/store'
 
+const lsNotTypingChatStatesKey = 'isNotSendingTypingChatStates'
+const lsInactiveChatStatesKey = 'isSendingInactiveChatStates'
+
 export default {
   name: 'PresenceController',
   components: {
@@ -49,6 +58,40 @@ export default {
       'isOnline',
       'presence',
     ]),
+    ...mapWritableState(useStore, [
+      'isSendingTypingChatStates',
+      'isSendingInactiveChatStates',
+    ]),
+    isSendingTypingChatStatesSwitch: {
+      get() {
+        return this.isSendingTypingChatStates
+      },
+      set(isSendingTypingChatStates) {
+        if (!isSendingTypingChatStates) {
+          localStorage.setItem(lsNotTypingChatStatesKey, true)
+        } else {
+          localStorage.removeItem(lsNotTypingChatStatesKey)
+        }
+        this.isSendingTypingChatStates = isSendingTypingChatStates
+      },
+    },
+    isSendingInactiveChatStatesSwitch: {
+      get() {
+        return this.isSendingInactiveChatStates
+      },
+      set(isSendingInactiveChatStates) {
+        if (isSendingInactiveChatStates) {
+          localStorage.setItem(lsInactiveChatStatesKey, true)
+        } else {
+          localStorage.removeItem(lsInactiveChatStatesKey)
+        }
+        this.isSendingInactiveChatStates = isSendingInactiveChatStates
+      },
+    },
+  },
+  mounted () {
+    this.isSendingTypingChatStates = localStorage.getItem(lsNotTypingChatStatesKey) === null
+    this.isSendingInactiveChatStates = localStorage.getItem(lsInactiveChatStatesKey) !== null
   },
   methods: {
     setPresence (presence) {

src/components/Sendbox.vue

@@ -3,7 +3,7 @@
     <form @submit.prevent="sendMessage">
       <div class="field is-flex is-align-items-center mr-3">
         <div class="control is-flex-grow-1">
-          <textarea v-model="composingMessage" class="textarea has-background-shade-4 is-shadowless has-placeholder-shade-1" :placeholder="!file? 'Send message' : ''" rows="2" :disabled="fileThumbnail || fileIcon" @keydown.ctrl.enter="sendMessage" @keydown.exact.enter="handleEnterKey" />
+          <textarea v-model="composingMessage" class="textarea has-background-shade-4 is-shadowless has-placeholder-shade-1" :placeholder="!file? 'Send message' : ''" rows="2" :disabled="fileThumbnail || fileIcon" @keydown.ctrl.enter="sendMessage" @keydown.exact.enter="handleEnterKey" @input="onInput" />
           <div v-if="fileThumbnail || fileIcon" class="thumbnail-container">
             <img v-if="fileThumbnail" :src="fileThumbnail" class="thumbnail">
             <i v-if="fileIcon" class="fa fa-2x" :class="fileIcon" />
@@ -51,6 +51,8 @@ export default {
       file: null,
       fileThumbnail: null,
       fileIcon: null,
+      chatState: null,
+      pauseTimeoutId: null,
     }
   },
   computed: {
@@ -60,6 +62,7 @@ export default {
     ...mapState(useStore, [
       'activeChat',
       'httpFileUploadMaxSize',
+      'isSendingTypingChatStates',
     ]),
   },
   methods: {
@@ -82,6 +85,37 @@ export default {
         console.error('send error', error)
       }
     },
+    async onInput () {
+      if (!this.isSendingTypingChatStates) {
+        // the user has opted out
+        return
+      }
+      clearTimeout(this.pauseTimeoutId)
+      if (this.composingMessage) {
+        // prepare to go to paused after 15 seconds
+        this.pauseTimeoutId = setTimeout(async () => {
+          if (!this.userJid) {
+            return
+          }
+          this.chatState = 'paused'
+          try {
+            await this.$xmpp.sendChatState(this.activeChat, this.isRoom, this.chatState)
+          } catch (error) {
+            console.warn(`Can not send state chat (${error.message}), are you still connected?`)
+          }
+        }, 15000)
+        if (this.chatState === 'composing') {
+          // do not send composing chat state if already done
+          return
+        }
+        // user has started to typing something
+        this.chatState = 'composing'
+      } else {
+        // user is not typing anything (or clear composing) but is active on chat
+        this.chatState = 'active'
+      }
+      await this.$xmpp.sendChatState(this.activeChat, this.isRoom, this.chatState)
+    },
     onFileChange (e) {
       const files = e.target.files || e.dataTransfer.files
       if (!files.length) {

src/store/index.js

@@ -16,6 +16,8 @@ const getDefaultState = () => {
     isOnline: false,
     presence: 'chat',
     hasNotificationsEnabled: false,
+    isSendingTypingChatStates: true,
+    isSendingInactiveChatStates: false,
   }
 }