From 1c331010575deb5ae0d66fe35d6e2465cd27af76 Mon Sep 17 00:00:00 2001
From: nioc <dev@nioc.eu>
Date: Tue, 14 Feb 2023 02:12:50 +0100
Subject: [PATCH 1/2] feat(chat states): Send chat state (XEP-0085)

Opt-out for composing/pauses/active states
Opt-in for inactive state
Save user preferences to local storage
And add icons to presence controller
---
 README.md                              |  2 +-
 src/assets/styles.scss                 |  4 +++
 src/components/Chat.vue                | 17 ++++++++++
 src/components/Home.vue                |  2 +-
 src/components/NotificationsSwitch.vue |  2 +-
 src/components/PresenceController.vue  | 47 ++++++++++++++++++++++++--
 src/components/Sendbox.vue             | 36 +++++++++++++++++++-
 src/store/index.js                     |  2 ++
 8 files changed, 106 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index bacf98d..2820182 100644
--- a/README.md
+++ b/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,
diff --git a/src/assets/styles.scss b/src/assets/styles.scss
index 12ab5c3..b404966 100644
--- a/src/assets/styles.scss
+++ b/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;
diff --git a/src/components/Chat.vue b/src/components/Chat.vue
index 9b0884a..3843c12 100644
--- a/src/components/Chat.vue
+++ b/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) {
diff --git a/src/components/Home.vue b/src/components/Home.vue
index 9270fdc..5969021 100644
--- a/src/components/Home.vue
+++ b/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>
 
diff --git a/src/components/NotificationsSwitch.vue b/src/components/NotificationsSwitch.vue
index afd4581..e2ec74e 100644
--- a/src/components/NotificationsSwitch.vue
+++ b/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>
 
diff --git a/src/components/PresenceController.vue b/src/components/PresenceController.vue
index 496113f..318901e 100644
--- a/src/components/PresenceController.vue
+++ b/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) {
diff --git a/src/components/Sendbox.vue b/src/components/Sendbox.vue
index a2b751e..1c56d50 100644
--- a/src/components/Sendbox.vue
+++ b/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) {
diff --git a/src/store/index.js b/src/store/index.js
index bf4780b..d961902 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -16,6 +16,8 @@ const getDefaultState = () => {
     isOnline: false,
     presence: 'chat',
     hasNotificationsEnabled: false,
+    isSendingTypingChatStates: true,
+    isSendingInactiveChatStates: false,
   }
 }
 

From 3b3518fc9ebdb8dc7ff47b8e4507b4d34940c8d7 Mon Sep 17 00:00:00 2001
From: nioc <dev@nioc.eu>
Date: Tue, 14 Feb 2023 19:52:50 +0100
Subject: [PATCH 2/2] ci: Add a Github action for testing a branch

---
 .github/workflows/docker-image-pr.yml | 81 +++++++++++++++++++++++++++
 1 file changed, 81 insertions(+)
 create mode 100644 .github/workflows/docker-image-pr.yml

diff --git a/.github/workflows/docker-image-pr.yml b/.github/workflows/docker-image-pr.yml
new file mode 100644
index 0000000..2922b55
--- /dev/null
+++ b/.github/workflows/docker-image-pr.yml
@@ -0,0 +1,81 @@
+name: Publish a branch for review
+
+on:
+  workflow_dispatch:
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Read metadata
+        uses: docker/metadata-action@v4
+        id: meta
+        with:
+          images: nioc/xmpp-web
+          flavor: |
+            latest=false
+
+      - name: Checkout code
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js 18
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+          cache: 'npm'
+          cache-dependency-path: 'package-lock.json'
+
+      - name: Build front
+        run: npm ci && npm run build
+
+      - name: Create release archive
+        shell: bash
+        run: |
+          mv dist xmpp-web &&
+          tar zcvf xmpp-web-${{ fromJSON(steps.meta.outputs.json).labels['org.opencontainers.image.version'] }}.tar.gz xmpp-web
+
+      - name: Draft Github release with archive
+        uses: softprops/action-gh-release@v1
+        with:
+          draft: true
+          prerelease: true
+          files: xmpp-web-${{ fromJSON(steps.meta.outputs.json).labels['org.opencontainers.image.version'] }}.tar.gz
+          body: |
+            ### :warning: Disclaimer
+
+            This a draft prerelease for the ${{ fromJSON(steps.meta.outputs.json).labels['org.opencontainers.image.version'] }} branch.
+
+      - name: Prepare docker build context
+        shell: bash
+        run: |
+          mkdir -p image-build/docs &&
+          mv xmpp-web image-build/xmpp-web &&
+          cp -a docs/docker image-build/docs/ -r
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Login to DockerHub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Build and push docker multi architecture image
+        id: docker_build
+        uses: docker/build-push-action@v3
+        with:
+          context: image-build
+          file: docs/docker/Dockerfile-multiarch
+          push: true
+          platforms: linux/amd64,linux/arm64,linux/arm/v7,linux/arm/v6
+          build-args: |
+            VERSION=${{ fromJSON(steps.meta.outputs.json).labels['org.opencontainers.image.version'] }}
+            GIT_COMMIT=${{ fromJSON(steps.meta.outputs.json).labels['org.opencontainers.image.revision'] }}
+            BUILD_DATE=${{ fromJSON(steps.meta.outputs.json).labels['org.opencontainers.image.created'] }}
+          tags: ${{ steps.meta.outputs.tags }}