diff --git a/frontend-vue/src/components/chat/MessageItem.vue b/frontend-vue/src/components/chat/MessageItem.vue
index 61cae1b..89bfa0a 100644
--- a/frontend-vue/src/components/chat/MessageItem.vue
+++ b/frontend-vue/src/components/chat/MessageItem.vue
@@ -66,6 +66,7 @@ interface Props {
const emit = defineEmits<{
'open-dialog': [message: ExtendedMessage | UnsentMessage]
+ 'open-dialog-edit': [message: ExtendedMessage | UnsentMessage]
'focus': []
}>()
@@ -211,6 +212,12 @@ const handleKeydown = (event: KeyboardEvent) => {
navigator.clipboard.writeText(props.message.content)
playSound('copy')
toastStore.success('Message copied to clipboard')
+ } else if (event.key === 'e') {
+ // Edit message - open the message dialog in edit mode
+ if (!props.isUnsent) {
+ event.preventDefault()
+ emit('open-dialog-edit', props.message)
+ }
} else if (event.key === 'r') {
// Read message aloud (only when no modifiers are pressed)
if (appStore.settings.ttsEnabled) {
diff --git a/frontend-vue/src/components/chat/MessagesContainer.vue b/frontend-vue/src/components/chat/MessagesContainer.vue
index ab448b7..dedb122 100644
--- a/frontend-vue/src/components/chat/MessagesContainer.vue
+++ b/frontend-vue/src/components/chat/MessagesContainer.vue
@@ -6,15 +6,17 @@
+ @focus="focusedMessageIndex = index"
+ @open-dialog="emit('open-message-dialog', $event)"
+ @open-dialog-edit="emit('open-message-dialog-edit', $event)" />
+ :data-message-index="messages.length + index" @focus="focusedMessageIndex = messages.length + index"
+ @open-dialog="emit('open-message-dialog', $event)"
+ @open-dialog-edit="emit('open-message-dialog-edit', $event)" />
@@ -32,6 +34,7 @@ interface Props {
const emit = defineEmits<{
'message-selected': [message: ExtendedMessage | UnsentMessage, index: number]
'open-message-dialog': [message: ExtendedMessage | UnsentMessage]
+ 'open-message-dialog-edit': [message: ExtendedMessage | UnsentMessage]
}>()
const props = defineProps()
diff --git a/frontend-vue/src/components/dialogs/MessageDialog.vue b/frontend-vue/src/components/dialogs/MessageDialog.vue
index 685649a..9ce476a 100644
--- a/frontend-vue/src/components/dialogs/MessageDialog.vue
+++ b/frontend-vue/src/components/dialogs/MessageDialog.vue
@@ -202,6 +202,7 @@ import type { ExtendedMessage } from '@/types'
interface Props {
message: ExtendedMessage
open: boolean
+ startEditing?: boolean
}
const emit = defineEmits<{
@@ -404,6 +405,11 @@ const handleKeydown = (event: KeyboardEvent) => {
onMounted(() => {
document.addEventListener('keydown', handleKeydown)
+
+ // Auto-start editing if requested
+ if (props.startEditing) {
+ startEditing()
+ }
})
// Cleanup on unmount
diff --git a/frontend-vue/src/views/MainView.vue b/frontend-vue/src/views/MainView.vue
index a3d053a..556ce93 100644
--- a/frontend-vue/src/views/MainView.vue
+++ b/frontend-vue/src/views/MainView.vue
@@ -55,6 +55,7 @@
:unsent-messages="appStore.unsentMessagesForChannel"
ref="messagesContainer"
@open-message-dialog="handleOpenMessageDialog"
+ @open-message-dialog-edit="handleOpenMessageDialogEdit"
/>
@@ -122,11 +123,12 @@
- (null)
+const shouldStartEditing = ref(false)
// Mobile sidebar state
const sidebarOpen = ref(false)
@@ -460,6 +463,16 @@ const handleOpenMessageDialog = (message: ExtendedMessage | UnsentMessage) => {
// Only allow dialog for sent messages (ExtendedMessage), not unsent ones
if ('created_at' in message) {
selectedMessage.value = message as ExtendedMessage
+ shouldStartEditing.value = false
+ showMessageDialog.value = true
+ }
+}
+
+const handleOpenMessageDialogEdit = (message: ExtendedMessage | UnsentMessage) => {
+ // Only allow dialog for sent messages (ExtendedMessage), not unsent ones
+ if ('created_at' in message) {
+ selectedMessage.value = message as ExtendedMessage
+ shouldStartEditing.value = true
showMessageDialog.value = true
}
}
@@ -467,6 +480,7 @@ const handleOpenMessageDialog = (message: ExtendedMessage | UnsentMessage) => {
const handleCloseMessageDialog = () => {
showMessageDialog.value = false
selectedMessage.value = null
+ shouldStartEditing.value = false
}
const handleEditMessage = async (messageId: number, content: string) => {