feat(chat): edit last message on keyup (#4986)

components/views/chat/chatbar/Chatbar.html

@@ -23,6 +23,7 @@
       :class="{'has-command' : hasCommand}"
       :focus="ui.chatbarFocus"
       @keydown="handleInputKeydown"
+      @keyup="handleInputKeyup"
       @paste="handlePaste"
     />
     <ChatbarControls

components/views/chat/chatbar/Chatbar.vue

@@ -5,17 +5,14 @@ import { mapState } from 'vuex'
 import { throttle, debounce } from 'lodash'
 import { TerminalIcon } from 'satellite-lucide-icons'
 import { parseCommand, commands } from '~/libraries/ui/Commands'
-import {
-  KeybindingEnum,
-  MessagingTypesEnum,
-  PropCommonEnum,
-} from '~/libraries/Enums/enums'
+import { KeybindingEnum, MessagingTypesEnum } from '~/libraries/Enums/enums'
 import { Config } from '~/config'
 import { RootState } from '~/types/store/store'
 import iridium from '~/libraries/Iridium/IridiumManager'
 import { ChatbarUploadRef } from '~/components/views/chat/chatbar/upload/Upload.vue'
 import {
   Conversation,
+  ConversationMessage,
   ConversationMessagePayload,
   MessageAttachment,
 } from '~/libraries/Iridium/chat/types'
@@ -33,6 +30,23 @@ function typingFunction(conversationId: string) {
   }
 }
 
+function isVisible(ele: HTMLElement, container: HTMLElement, partial = false) {
+  const cTop = container.scrollTop
+  const cBottom = cTop + container.clientHeight
+
+  const eTop = ele.offsetTop
+  const eBottom = eTop + ele.clientHeight
+
+  const scrolledBefore = eTop >= cTop
+  const scrolledAfter = eBottom <= cBottom
+  const isTotal = scrolledBefore && scrolledAfter
+  const isPartial =
+    partial &&
+    ((eTop < cTop && eBottom > cTop) || (eBottom > cBottom && eTop < cBottom))
+
+  return { isElVisible: isTotal || isPartial, scrolledAfter, scrolledBefore }
+}
+
 const Chatbar = Vue.extend({
   components: {
     TerminalIcon,
@@ -153,6 +167,16 @@ const Chatbar = Vue.extend({
         ? (this.$t('ui.talk') as string)
         : ''
     },
+    userLastTextMessage(): ConversationMessage | undefined {
+      if (!this.conversationId) return
+
+      return Object.values(
+        iridium.chat.state.conversations[this.conversationId].message,
+      )
+        .filter((m) => m.from === iridium.id && m.type === 'text')
+        .sort((a, b) => a.at - b.at)
+        .at(-1)
+    },
   },
   mounted() {
     const message = this.chat.draftMessages[this.conversationId] ?? ''
@@ -207,6 +231,17 @@ const Chatbar = Vue.extend({
       }
       this.smartTypingStart()
     },
+    handleInputKeyup(event: KeyboardEvent) {
+      switch (event.key) {
+        case KeybindingEnum.ARROW_UP:
+          if (!event.shiftKey) {
+            this.editMessage()
+          }
+          break
+        default:
+          break
+      }
+    },
     async uploadAttachments(): Promise<MessageAttachment[]> {
       if (!this.files.length) {
         return []
@@ -322,6 +357,29 @@ const Chatbar = Vue.extend({
       }
       ;(this.$refs.editable as EditableRef).handleTextFromOutside(text)
     },
+    editMessage() {
+      if (!this.userLastTextMessage) return
+      const { id, payload, from } = this.userLastTextMessage
+      this.$store.commit('ui/setEditMessage', {
+        id,
+        payload,
+        from,
+      })
+
+      this.$nextTick(() => {
+        const el = document.querySelector(
+          `[data-message-id="${id}"]`,
+        ) as HTMLElement
+
+        const container = document.getElementById('conversation-container')
+        if (!el || !container) return
+        const { isElVisible, scrolledAfter } = isVisible(el, container)
+
+        if (!isElVisible) {
+          el.scrollIntoView(scrolledAfter)
+        }
+      })
+    },
   },
 })
 export type ChatbarRef = InstanceType<typeof Chatbar>

components/views/chat/conversation/Conversation.html

@@ -1,4 +1,5 @@
-<div class="conversation" ref="container">
+<!-- dont change the 'conversation-container' id -->
+<div id="conversation-container" class="conversation" ref="container">
   <div class="messages" ref="messages">
     <UiBanner>
       <template #icon><key-icon size="1x" /></template>

components/views/chat/conversation/Conversation.less

@@ -1,4 +1,5 @@
 .conversation {
+  position: relative; // Dont remove
   display: flex;
   flex-direction: column;
   flex: 1;

components/views/chat/message/Message.html

@@ -1,4 +1,8 @@
-<div class="chat-message-container" :class="{ 'show-header': showHeader }">
+<div
+  class="chat-message-container"
+  :class="{ 'show-header': showHeader }"
+  :data-message-id="message.id"
+>
   <MessageNotice v-if="isNotice" :message="message" />
   <div
     v-else

components/views/chat/message/Message.less

@@ -10,7 +10,7 @@
 
 .chat-message-container {
   &.show-header {
-    margin-top: @normal-spacing;
+    padding-top: @normal-spacing;
   }
 }
 

components/views/chat/message/Message.vue

@@ -188,27 +188,34 @@ export default Vue.extend({
         from,
       })
     },
-    saveMessage(message: string) {
+    async saveMessage(message: string) {
       this.$store.commit('ui/setEditMessage', {
         id: '',
         payload: '',
         from: '',
       })
 
       if (message !== this.message.body) {
-        iridium.chat.editMessage({
+        await iridium.chat.editMessage({
           conversationId: this.message.conversationId,
           messageId: this.message.id,
           body: message,
         })
       }
+
+      if (this.$device.isDesktop) {
+        this.$store.dispatch('ui/setChatbarFocus')
+      }
     },
     cancelMessage() {
       this.$store.commit('ui/setEditMessage', {
         id: '',
         payload: '',
         from: '',
       })
+      if (this.$device.isDesktop) {
+        this.$store.dispatch('ui/setChatbarFocus')
+      }
     },
   },
 })