Dev#16
Merged
BuckyMcYolo merged 2 commits intomainfrom Mar 9, 2026
Merged
Conversation
📝 WalkthroughWalkthroughThis pull request adds message deletion and editing functionality across the realtime server and web client. New socket event handlers process delete/edit operations, new React hooks manage optimistic UI updates with cache synchronization, and new components enable message editing interfaces and confirmation dialogs. Changes
Sequence DiagramsequenceDiagram
participant User as User (Client)
participant UI as Web UI
participant Hook as Edit/Delete Hook
participant Cache as Query Cache
participant Socket as WebSocket
participant Server as Realtime Server
participant DB as Database
User->>UI: Click Delete/Edit message
UI->>Hook: Call handleDelete/handleEdit
Hook->>Cache: Optimistically update cache<br/>(remove message or update content)
Hook->>Socket: Emit message:delete/message:edit<br/>with payload (channelId, messageId, content)
Socket->>Server: Receive event payload
Server->>Server: Validate ownership & permissions
Server->>DB: Delete/update message in database
DB-->>Server: Confirmation
Server->>Socket: Emit message:deleted/<br/>message:updated event
Server-->>Socket: Send ack (ok: true)
Socket->>Hook: Receive message:deleted/<br/>message:updated event
Hook->>Cache: Apply confirmed update<br/>(if matches channelId)
alt On Error
Server-->>Socket: Send ack (ok: false, error)
Socket->>Hook: Receive ack with error
Hook->>Cache: Invalidate messages query<br/>(re-fetch from server)
end
Cache->>UI: Notify of cache update
UI->>User: Render updated message list
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/web/src/hooks/use-message-editing.ts`:
- Around line 55-79: The optimistic editedAt timestamp created in handleEdit
(editedAt) can diverge from the server's authoritative timestamp; update the
socket.emit ack handling in handleEdit to accept a server-editedAt (e.g.,
result.editedAt) and, when result.ok is true, call
updateMessageInCache(messageId, content, result.editedAt) to reconcile the cache
with the server; keep the optimistic update for immediacy but overwrite it on
successful ack with the server timestamp, and on failure continue invalidating
via queryClient.invalidateQueries({ queryKey: ["messages", channelId] }).
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 24cf558f-f28a-421e-a971-dee38daf5de6
📒 Files selected for processing (17)
ROADMAP.mdapps/realtime/src/index.tsapps/realtime/src/services/messages.tsapps/web/src/components/chat/composer/message-input.tsxapps/web/src/components/chat/message-action-bar.tsxapps/web/src/components/chat/message-edit-input.tsxapps/web/src/components/chat/message-item.tsxapps/web/src/components/chat/message-list.tsxapps/web/src/components/chat/message-markdown.tsxapps/web/src/hooks/use-message-deletion.tsapps/web/src/hooks/use-message-editing.tsapps/web/src/lib/editor-utils.tsapps/web/src/lib/realtime-adapter.tsapps/web/src/routes/_authenticated/$guildSlug/$channelId.tsxapps/web/src/routes/_authenticated/dms/$dmId.tsxpackages/realtime-types/src/events.tspackages/ui/src/components/alert-dialog.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Message Editing and Deletion Feature Implementation
Overview
This PR implements comprehensive message editing and deletion functionality across the full stack of the townhall application. The implementation includes realtime socket event handlers, backend service logic with access control, frontend UI components with optimistic updates, custom React hooks for state management, and utility modules for text processing.
Key Implementation Details
Socket Event Architecture:
message:deleteandmessage:editsocket event handlers on the realtime servermessage:deletedandmessage:updatedserver-to-client events for real-time synchronization{ ok: true/false, error? }Backend Service Layer:
deleteMessage()andeditMessage()async functions with full access control verificationFrontend State Management:
useMessageDeletionhook: Optimistic deletion with cache filtering and socket listener for remote deletionsuseMessageEditinghook: Optimistic edits with cache updates and socket listener for remote editsUI Components:
MessageEditInput: TipTap editor component with markdown, links, and mentions supportMessageItem: Extended with edit/delete state management and confirmation dialogsMessageActionBar: Reorganized to show Edit above Delete with proper permission checksMessageMarkdown: Shows "(edited)" indicator when message has been editedAlertDialogcomponent suite for delete confirmationmessage-action-bar.tsxproperly conditions callbacks oncanManageMessage && onCallbackRoute Integration:
handleDeleteandhandleEdithandlers via the new hooksmentionCandidatestoMessageListMessageListpropagates props through to individualMessageItemcomponentsType System & Exports:
MentionCandidatetype properly defined and available throughout component treeeditedAtfieldUtility Module:
editor-utils.tsextracts mention processing logic from message-input.tsxtoStoredMarkdown()normalizes markdown and converts TipTap mentions to stored formatextractMentionIds()pulls unique mention IDs from stored contentmessage-input.tsxexportsSUGGESTION_MENU_SELECTORandcreateMentionSuggestionfor reuseCode Quality Assessment
Strengths:
message:sendandmessage:reaction:toggleflows)Areas of Concern:
toStoredMarkdownand backend trimming - any mismatch in logic could cause edit rejectionsevent.isComposingcheck not visible in shown code)new Date().toISOString()for optimistic UI; server may generate different timestamp on actual update, potential mismatchPotential Edge Cases Not Addressed:
Confidence Score: 4/5
Rationale: The implementation is well-structured, follows established patterns throughout the codebase, and demonstrates solid architectural decisions. The wiring between components, hooks, routes, and socket handlers is complete and correct. Type safety is properly maintained, error handling is comprehensive, and optimistic UI updates include fallback mechanisms.
The main deductions are: (1) complete absence of visible test coverage for new functionality, (2) reliance on regex patterns that could be brittle, and (3) potential timing issues with optimistic timestamps. However, the core implementation quality is strong, with proper cleanup, error handling, and permission checks throughout. The PR is production-ready with the understanding that test coverage should be added separately.