fix(frontend): fix group chat invite loading and initial message issues #827
Conversation
- Change task status to COMPLETED instead of RUNNING in handleTaskInvited callback to prevent sidebar from showing indefinite spinning indicator for invited group chat members - Replace group chat creation initial message with system marker '__SYSTEM_GROUP_CREATED__' that gets filtered out in useUnifiedMessages - Add isSystemMessage filter to hide internal system markers from UI Fixes: 1. Group chat members sidebar no longer shows infinite loading spinner 2. No visible "Group chat created" message appears when creating new group
📝 WalkthroughWalkthroughGroup-chat creation now emits an internal system marker message instead of a localized visible message; the unified message hook filters system messages before returning messages. The invited-group-chat task creation via WebSocket is marked immediately completed (status COMPLETED, progress 100, completed_at set). Changes
Sequence Diagram(s)sequenceDiagram
participant UX as User
participant Dialog as CreateGroupChatDialog
participant WS as TaskContext (WebSocket)
participant Messages as useUnifiedMessages
participant UI as Messages UI
UX->>Dialog: Submit "create group chat"
Dialog->>WS: sendMessage(payload with SYSTEM_GROUP_CREATED marker)
WS->>Messages: emit message into unified stream
Messages->>Messages: sort messages
Messages->>Messages: filter out system messages (isSystemMessage)
Messages->>UI: return filtered message list
UI->>UX: display messages (system marker hidden)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
📜 Recent review detailsConfiguration used: defaults Review profile: CHILL Plan: Pro 📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (1)
🧰 Additional context used📓 Path-based instructions (5)**/*.{py,ts,tsx,js,jsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.{ts,tsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.{ts,tsx,js,jsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
frontend/src/**/*.{ts,tsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
frontend/**/*.{ts,tsx,js,jsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
🧠 Learnings (1)📚 Learning: 2025-12-31T03:47:12.173ZApplied to files:
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
🔇 Additional comments (3)
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: 0
🧹 Nitpick comments (1)
frontend/src/features/tasks/hooks/useUnifiedMessages.ts (1)
36-46: Extract system marker to a shared constant file.The system marker
'__SYSTEM_GROUP_CREATED__'is duplicated inCreateGroupChatDialog.tsx(line 110). Consider extracting it to a shared constants file (e.g.,features/tasks/constants/systemMessages.ts) to ensure consistency and easier maintenance.🔎 Proposed refactor
Create a new file
frontend/src/features/tasks/constants/systemMessages.ts:// System message markers for internal use only // These messages should be filtered out from user-facing message lists export const SYSTEM_MESSAGE_MARKERS = { GROUP_CHAT_CREATED: '__SYSTEM_GROUP_CREATED__', } as const export type SystemMessageMarker = typeof SYSTEM_MESSAGE_MARKERS[keyof typeof SYSTEM_MESSAGE_MARKERS] export function isSystemMessage(content: string): boolean { return Object.values(SYSTEM_MESSAGE_MARKERS).includes(content as SystemMessageMarker) }Then import and use in both files:
-const SYSTEM_GROUP_CREATED_MARKER = '__SYSTEM_GROUP_CREATED__'; - -function isSystemMessage(content: string): boolean { - return content === SYSTEM_GROUP_CREATED_MARKER; -} +import { isSystemMessage } from '@/features/tasks/constants/systemMessages'In CreateGroupChatDialog.tsx:
+import { SYSTEM_MESSAGE_MARKERS } from '@/features/tasks/constants/systemMessages' ... - message: '__SYSTEM_GROUP_CREATED__', + message: SYSTEM_MESSAGE_MARKERS.GROUP_CHAT_CREATED,
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
frontend/src/features/tasks/components/group-chat/CreateGroupChatDialog.tsxfrontend/src/features/tasks/contexts/taskContext.tsxfrontend/src/features/tasks/hooks/useUnifiedMessages.ts
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{py,ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{py,ts,tsx,js,jsx}: All code comments MUST be written in English
File size MUST NOT exceed 1000 lines - split into multiple sub-modules if exceeded
Function length SHOULD NOT exceed 50 lines (preferred)
Files:
frontend/src/features/tasks/components/group-chat/CreateGroupChatDialog.tsxfrontend/src/features/tasks/contexts/taskContext.tsxfrontend/src/features/tasks/hooks/useUnifiedMessages.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
TypeScript/React MUST use strict mode, functional components, Prettier for formatting, ESLint for linting, single quotes, and no semicolons
Files:
frontend/src/features/tasks/components/group-chat/CreateGroupChatDialog.tsxfrontend/src/features/tasks/contexts/taskContext.tsxfrontend/src/features/tasks/hooks/useUnifiedMessages.ts
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
TypeScript MUST use
constoverlet, never usevar
Files:
frontend/src/features/tasks/components/group-chat/CreateGroupChatDialog.tsxfrontend/src/features/tasks/contexts/taskContext.tsxfrontend/src/features/tasks/hooks/useUnifiedMessages.ts
frontend/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
frontend/src/**/*.{ts,tsx}: MUST useuseTranslationhook imported from@/hooks/useTranslation, not fromreact-i18next
MUST use single namespace withuseTranslation()- never use array format likeuseTranslation(['common', 'groups'])
Frontend message data MUST always usemessagesfromuseUnifiedMessages()hook as the single source of truth for displaying messages - never useselectedTaskDetail.subtasks
Frontend i18n translation keys MUST use current namespace formatt('key.subkey')for keys within namespace andt('namespace:key.subkey')for cross-namespace keys
Files:
frontend/src/features/tasks/components/group-chat/CreateGroupChatDialog.tsxfrontend/src/features/tasks/contexts/taskContext.tsxfrontend/src/features/tasks/hooks/useUnifiedMessages.ts
frontend/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Frontend MUST only use
NEXT_PUBLIC_*environment variables for client-safe values
Files:
frontend/src/features/tasks/components/group-chat/CreateGroupChatDialog.tsxfrontend/src/features/tasks/contexts/taskContext.tsxfrontend/src/features/tasks/hooks/useUnifiedMessages.ts
🧠 Learnings (1)
📚 Learning: 2025-12-31T03:47:12.173Z
Learnt from: CR
Repo: wecode-ai/Wegent PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-31T03:47:12.173Z
Learning: Applies to frontend/src/**/*.{ts,tsx} : Frontend message data MUST always use `messages` from `useUnifiedMessages()` hook as the single source of truth for displaying messages - never use `selectedTaskDetail.subtasks`
Applied to files:
frontend/src/features/tasks/components/group-chat/CreateGroupChatDialog.tsxfrontend/src/features/tasks/contexts/taskContext.tsxfrontend/src/features/tasks/hooks/useUnifiedMessages.ts
🧬 Code graph analysis (1)
frontend/src/features/tasks/components/group-chat/CreateGroupChatDialog.tsx (1)
frontend/src/features/tasks/service/messageService.ts (1)
sendMessage(90-154)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: Test Frontend
- GitHub Check: Test wegent CLI Integration
- GitHub Check: E2E Tests (Shard 3/3)
- GitHub Check: E2E Tests (Shard 1/3)
- GitHub Check: E2E Tests (Shard 2/3)
🔇 Additional comments (3)
frontend/src/features/tasks/hooks/useUnifiedMessages.ts (1)
327-332: LGTM! Filtering logic is correctly applied.The system message filtering is properly placed after sorting and before returning, ensuring internal markers are hidden from the UI while maintaining correct message order.
frontend/src/features/tasks/contexts/taskContext.tsx (1)
372-399: LGTM! Status change correctly addresses the infinite spinner issue.Setting invited group chat tasks to
COMPLETEDstatus withprogress: 100andcompleted_at: data.created_atis the right approach. This ensures invited users don't see an indefinite loading spinner in the sidebar, as the group chat creation is already complete when the invitation is received.frontend/src/features/tasks/components/group-chat/CreateGroupChatDialog.tsx (1)
105-110: LGTM! System marker correctly replaces the visible initial message.The change from a localized message to the system marker ensures no initial "Group chat created" message appears to users, as the marker will be filtered out by
useUnifiedMessages.Note: The string duplication concern is addressed in the review comment for
useUnifiedMessages.tslines 36-46.
- Create systemMessages.ts constant file for system message markers - Import SYSTEM_MESSAGE_MARKERS and isSystemMessage from shared module - Replace inline constant with imported constant for better maintainability This addresses CodeRabbit review feedback to avoid code duplication
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
frontend/src/features/tasks/components/group-chat/CreateGroupChatDialog.tsx (1)
109-169: Remove the unused translation keygroupChat.create.initialMessagefrom locale files.The translation key exists in
frontend/src/i18n/locales/en/common.jsonand corresponding locale files but is not referenced anywhere in the codebase. The system message marker approach correctly filters this message usingisSystemMessage()in theuseUnifiedMessages()hook, which is the proper single source of truth for displaying messages. Remove the unusedinitialMessagekey from all locale files to keep translations clean.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
frontend/src/features/tasks/components/group-chat/CreateGroupChatDialog.tsxfrontend/src/features/tasks/constants/systemMessages.tsfrontend/src/features/tasks/hooks/useUnifiedMessages.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- frontend/src/features/tasks/hooks/useUnifiedMessages.ts
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{py,ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{py,ts,tsx,js,jsx}: All code comments MUST be written in English
File size MUST NOT exceed 1000 lines - split into multiple sub-modules if exceeded
Function length SHOULD NOT exceed 50 lines (preferred)
Files:
frontend/src/features/tasks/components/group-chat/CreateGroupChatDialog.tsxfrontend/src/features/tasks/constants/systemMessages.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
TypeScript/React MUST use strict mode, functional components, Prettier for formatting, ESLint for linting, single quotes, and no semicolons
Files:
frontend/src/features/tasks/components/group-chat/CreateGroupChatDialog.tsxfrontend/src/features/tasks/constants/systemMessages.ts
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
TypeScript MUST use
constoverlet, never usevar
Files:
frontend/src/features/tasks/components/group-chat/CreateGroupChatDialog.tsxfrontend/src/features/tasks/constants/systemMessages.ts
frontend/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
frontend/src/**/*.{ts,tsx}: MUST useuseTranslationhook imported from@/hooks/useTranslation, not fromreact-i18next
MUST use single namespace withuseTranslation()- never use array format likeuseTranslation(['common', 'groups'])
Frontend message data MUST always usemessagesfromuseUnifiedMessages()hook as the single source of truth for displaying messages - never useselectedTaskDetail.subtasks
Frontend i18n translation keys MUST use current namespace formatt('key.subkey')for keys within namespace andt('namespace:key.subkey')for cross-namespace keys
Files:
frontend/src/features/tasks/components/group-chat/CreateGroupChatDialog.tsxfrontend/src/features/tasks/constants/systemMessages.ts
frontend/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Frontend MUST only use
NEXT_PUBLIC_*environment variables for client-safe values
Files:
frontend/src/features/tasks/components/group-chat/CreateGroupChatDialog.tsxfrontend/src/features/tasks/constants/systemMessages.ts
🧠 Learnings (1)
📚 Learning: 2025-12-31T03:47:12.173Z
Learnt from: CR
Repo: wecode-ai/Wegent PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-31T03:47:12.173Z
Learning: Applies to frontend/src/**/*.{ts,tsx} : Frontend message data MUST always use `messages` from `useUnifiedMessages()` hook as the single source of truth for displaying messages - never use `selectedTaskDetail.subtasks`
Applied to files:
frontend/src/features/tasks/components/group-chat/CreateGroupChatDialog.tsxfrontend/src/features/tasks/constants/systemMessages.ts
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: Test wegent CLI Integration
- GitHub Check: E2E Tests (Shard 3/3)
- GitHub Check: E2E Tests (Shard 1/3)
- GitHub Check: E2E Tests (Shard 2/3)
🔇 Additional comments (3)
frontend/src/features/tasks/constants/systemMessages.ts (1)
1-24: LGTM! Clean and type-safe system message marker implementation.The constant definition with
as const, the derived union type, and the helper function are well-designed. The documentation clearly explains the purpose, and the implementation follows TypeScript best practices.frontend/src/features/tasks/components/group-chat/CreateGroupChatDialog.tsx (2)
34-34: LGTM! Import is correct and necessary.The import statement correctly brings in the SYSTEM_MESSAGE_MARKERS constant for use in the message creation logic.
106-111: Implementation verified - message filtering is correctly in place.The system marker
SYSTEM_MESSAGE_MARKERS.GROUP_CHAT_CREATEDis properly defined and integrated withuseUnifiedMessages(). The hook correctly importsisSystemMessageand filters out these markers at line 318 before returning the message list, ensuring system messages are never displayed to users. The comments accurately explain the filtering behavior.
Summary
Changes
taskContext.tsx: Change task status from
RUNNINGtoCOMPLETEDinhandleTaskInvitedcallbackCreateGroupChatDialog.tsx: Replace initial message with system marker
__SYSTEM_GROUP_CREATED__useUnifiedMessages.ts: Add system message filtering
isSystemMessage()helper function to identify internal markersRoot Cause Analysis
Sidebar spinning issue: When a user is invited to a group chat via WebSocket (
task:invitedevent), the task was created withstatus: 'RUNNING'andprogress: 0. Since group chat tasks are typically already complete when the invitation is sent, this caused the sidebar to show an infinite loading spinner.Initial message issue: The group chat creation flow required sending an initial message. This message ("群聊已创建，欢迎大家！" / "Group chat created, welcome everyone!") was displayed as a regular user message, which is not desirable.
Test plan
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.