Skip to content

Conversation

@spencrmartin
Copy link
Collaborator

@spencrmartin spencrmartin commented Aug 16, 2025

Uploading Screen Recording 2025-08-16 at 5.06.51 PM.mov…

🎨 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
@spencrmartin spencrmartin marked this pull request as ready for review August 16, 2025 22:41
- 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
- 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
- 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
@michaelneale michaelneale merged commit fb7ddf7 into micn/queued-ui-inputs Aug 18, 2025
5 checks passed
@michaelneale michaelneale deleted the spence/queued-fp branch August 18, 2025 06:06
@michaelneale
Copy link
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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants