diff --git a/components/views/chat/chatbar/Chatbar.html b/components/views/chat/chatbar/Chatbar.html index b5e8aa67f3..272ff4ff88 100644 --- a/components/views/chat/chatbar/Chatbar.html +++ b/components/views/chat/chatbar/Chatbar.html @@ -23,6 +23,7 @@ :class="{'has-command' : hasCommand}" :focus="ui.chatbarFocus" @keydown="handleInputKeydown" + @keyup="handleInputKeyup" @paste="handlePaste" /> = 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 { 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 diff --git a/components/views/chat/conversation/Conversation.html b/components/views/chat/conversation/Conversation.html index 2138da71c3..bd68cd3cdc 100644 --- a/components/views/chat/conversation/Conversation.html +++ b/components/views/chat/conversation/Conversation.html @@ -1,4 +1,5 @@ -
+ +
diff --git a/components/views/chat/conversation/Conversation.less b/components/views/chat/conversation/Conversation.less index d1086908a3..f7c8d55b9d 100644 --- a/components/views/chat/conversation/Conversation.less +++ b/components/views/chat/conversation/Conversation.less @@ -1,4 +1,5 @@ .conversation { + position: relative; // Dont remove display: flex; flex-direction: column; flex: 1; diff --git a/components/views/chat/message/Message.html b/components/views/chat/message/Message.html index 54b424d212..48942fffcf 100644 --- a/components/views/chat/message/Message.html +++ b/components/views/chat/message/Message.html @@ -1,4 +1,8 @@ -
+