-
Notifications
You must be signed in to change notification settings - Fork 2.4k
feat: Enhanced message queue system with interruption handling #4140
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Conversation
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
🎨 MessageQueue Component: - Beautiful gradient backgrounds with backdrop blur effects - Enhanced message bubbles with hover animations and scaling - Priority indicators with visual hierarchy (numbered badges) - Improved drag-and-drop with smooth transitions and visual feedback - Status indicators for paused/active states with animated pulse dots - Timestamp formatting with relative time display - Enhanced 'Send Now' pills with gradient backgrounds and smooth hover animations - Better spacing, typography, and visual hierarchy 🎨 InterruptionHandler Component: - Full-screen modal overlay with backdrop blur - Color-coded interruption types (red for stop, amber for pause, blue for redirect) - Confidence meter with visual progress bar - Enhanced card design with proper shadows and glass morphism - Smooth entrance/exit animations - Better button styling and hover states - Improved typography and spacing 🎨 Pill Component: - Multiple variants: default, glass, solid, gradient, glow - Color system with 6 predefined colors (blue, green, amber, red, purple, slate) - Size variants from xs to lg - Enhanced hover animations with scaling effects - Glass morphism effects with backdrop blur - Gradient and glow variants with shadow effects All components now feature: - Consistent design language - Smooth animations and transitions - Dark mode support - Better accessibility - Professional visual polish
🎨 Dual View System: - Compact View: Minimal single-line display showing next message - Expanded View: Full queue interface with all messages and controls - Smooth toggle between states with expand/collapse buttons 📱 Compact View Features: - Shows next message preview (truncated to 40 chars) - Queue count indicator (+N for remaining messages) - Quick 'Send Now' button for immediate action - Status indicator (paused/active) with animated pulse dot - Click anywhere to expand to full view - Paused state banner with resume instructions 🖥️ Expanded View Features: - Full message list with drag-and-drop reordering - Individual message controls and timestamps - Enhanced hover states and animations - Scrollable container for large queues (max-height: 320px) - Complete queue management (clear all, remove individual) - Collapse button to return to compact view 🔄 State Management: - Automatic state preservation during view changes - Smooth transitions between compact/expanded modes - Integrated pause state display in both views - Consistent visual language across both states This provides users with: - Quick overview when space is limited (compact) - Full control when detailed management is needed (expanded) - Seamless switching between modes - Better screen real estate utilization
- Added missing queuePausedRef useRef declaration - Fixes TypeScript error where queuePausedRef was being used but not defined - Maintains pause state functionality for queue interruption handling
- Remove blueish gradient backgrounds, use app background colors - Update message counter to use bgSubtle for better visibility - Remove top padding above MessageQueue component (0px spacing) - Move Send Now button inline within message rows - Change Send button to icon-only with ghost variant (no outline) - Use app's color system (text-info, bg-blue-500) for consistency - Maintain solid backgrounds for status indicators and priority badges
- Send stop/wait messages immediately so Goose can respond to interruptions - Pause queue processing after stop commands to prevent auto-continuation - Preserve all queued messages for user decision-making - Resume queue when user sends new message or uses Send Now button - Provides better user control over interruption and continuation flow
- Remove conflicting sendNowTriggeredRef logic that was preventing queue resumption - Allow normal queue processing to continue after using Send Now from paused state - Maintain proper queue flow when resuming from interruption pause
- Manually process next queued message after Send Now completes - Ensures queue continues automatically after resuming from pause - Fixes issue where queue would stop after using Send Now button
- Clean up malformed setTimeout calls that were causing build errors - Properly structure manual queue processing after Send Now - Use 1000ms delay to ensure message processing completes before next
- Restore from clean backup to avoid syntax errors - Add pause logic when stop/wait commands are sent - Resume queue processing when using Send Now or typing new message - Add manual trigger for next message processing after Send Now - Use 1500ms delay to ensure proper message processing sequence
- Change remove button from hover-only to always visible with subtle opacity - Use opacity-60 for subtle presence, opacity-100 on hover for clarity - Eliminates awkward white space and improves user experience - Follows modern UI patterns for interactive elements
- Add onEditMessage prop and handler for editing queued messages - Click on message content to enter edit mode with textarea - Save/Cancel buttons for edit actions with proper state management - Update timestamp when message is edited - Hover effect on message content indicates it's clickable - Auto-sizing textarea based on content length (max 4 rows)
- Properly define handleEditMessage function after handleReorderMessages - Fix function scope and syntax issues that were causing undefined error - Ensure proper message editing functionality in ChatInput component
- Add isEditingRef to track when user is editing a message - Pause automatic queue processing while editing is in progress - Set editing state when entering edit mode, clear on save/cancel - Prevents queue from processing messages while user is making edits - Ensures uninterrupted editing experience
3151aba to
9fc790e
Compare
- Add disabled state to Send Now button when message is in edit mode - Update button styling to show disabled state with opacity and cursor changes - Change tooltip to indicate why button is disabled during editing - Prevents sending incomplete or partially edited messages
- Add 16px top padding (pt-4) when no messages are queued - Remove top padding when MessageQueue is visible to avoid double spacing - Ensures proper visual spacing between components
- Add onTriggerQueueProcessing callback to manually restart queue - Call queue processing trigger when Save button is clicked after editing - Add 100ms delay to ensure edit state is properly cleared before resuming - Ensures seamless queue continuation after message editing is complete
… (clean) - Reset to stable commit and cleanly implement smart pausing logic - Track specific message ID being edited instead of boolean flag - Only pause queue when editing the first message (next to be processed) - Allow queue to continue when editing later messages in the queue
47d0be5 to
7c6632d
Compare
- Create QueueStorage utility for localStorage persistence - Load saved queue on ChatInput component mount - Auto-save queue changes to localStorage with useEffect - Update all queue operations to sync both state and storage - 24-hour expiry and 50-message limit to prevent bloat - Queue now persists across page navigation and app restarts
- Update useState initialization to load saved queue from localStorage - Ensures queue component appears when navigating back to chat page - Queue now properly restores from storage on component mount
- Add useEffect to reset processing state on component mount - Clear pause flags and editing state when returning to chat page - Auto-trigger queue processing if messages exist and system is ready - Prevents queue from getting stuck after navigation
Collaborator
|
I merged this @spencrmartin but I don't think it was in a working state - did you have some local changes that made what you showed in video work? |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Uploading Screen Recording 2025-08-16 at 5.06.51 PM.mov…