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) => {