From 4b0623c2a5204443e7354ed02eebfd91883531a5 Mon Sep 17 00:00:00 2001 From: Nicholai Date: Sat, 15 Nov 2025 07:19:10 -0700 Subject: [PATCH] docs: update project documentation with UI refinements - Add UI/UX refinements section to .cursorrules with message display, button layout, scrollbar, pill animations, and Create New button details - Update CLAUDE.md with message display formatting and top button layout information - Update README.md key features with polished UI and custom agents information --- .cursorrules | 32 ++++++++++++++++++++++++++++++-- CLAUDE.md | 10 +++++++++- README.md | 2 ++ 3 files changed, 41 insertions(+), 3 deletions(-) diff --git a/.cursorrules b/.cursorrules index 228515fdb..accdfdbf0 100644 --- a/.cursorrules +++ b/.cursorrules @@ -382,6 +382,34 @@ localStorage.getItem('selected-agent') --- -**Last Updated**: 2025-11-15 -**Version**: 1.0 +## UI/UX Refinements (2025-11-15) + +### Message Display +- User messages limited to 75% max-width with proper text wrapping +- Messages positioned on right but text is left-aligned (natural flow) +- Code blocks in messages have overflow handling with horizontal scrolling +- Inline code and block code properly contained within message bubbles + +### Button Layout +- "New chat" button positioned on left side of manuscript panel +- Bookmark/pinned agents button positioned on right side +- Buttons use `ml-auto` flex layout for proper spacing + +### Scrollbar Styling +- Changed from orange to neutral gray (`#9ca3af` light mode, `#6b7280` dark mode) +- Scrollbars hidden by default, show on hover +- Maintains consistency with minimalist design + +### Pill Animations +- Fixed flicker by initializing `pinnedAgents` from localStorage in state initializer +- Added 0.2s base delay to all pills for staggered reveal effect +- Each pill staggered 60ms apart for smooth cascade animation + +### "Create New" Button +- Enhanced animation with bouncy scale: `[1, 1.1, 0.95, 1.05, 1]` +- Duration: 0.6s with `easeInOut` easing +- Provides clear visual feedback before selecting Morgan and populating input + +**Last Updated**: 2025-11-15 +**Version**: 1.1 diff --git a/CLAUDE.md b/CLAUDE.md index 00edff5a9..6319b08e9 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -133,11 +133,19 @@ The route handles multiple n8n response formats: - Enter to send, Shift+Enter for new line - Paperclip icon for image attachments +### Top Button Layout +- "Start new chat" button positioned on left side of manuscript panel +- "View pinned agents" bookmark button positioned on right side +- Uses flex layout with `ml-auto` to push bookmark to the right + ### Message Display -- User messages: right-aligned with glass bubble styling +- User messages: positioned on right with glass bubble styling, text left-aligned within bubble (natural flow) +- Message content limited to 75% max-width with word-wrapping for long text +- Code blocks in messages have horizontal scrolling with proper overflow handling - Assistant messages: markdown-rendered with copy button and syntax highlighting - Error messages: red text, optional hint field displayed below - Loading state: animated shimmer bar +- Scrollbars: gray color (neutral), hidden by default, shown on hover ## Feature Flag System diff --git a/README.md b/README.md index dea191d60..214a58573 100644 --- a/README.md +++ b/README.md @@ -76,6 +76,8 @@ Multi-agent chat interface that enables users to select from configured AI agent - **Session persistence:** Agent-specific conversation history in localStorage - **Mobile-optimized:** Glass-morphism design with mobile-first responsiveness - **Feature flags:** Runtime-configurable features for controlled rollouts +- **Polished UI:** Message formatting with proper wrapping, smooth animations, and refined scrollbars +- **Custom agents:** Create and pin custom agents via Morgan (Agent Architect)

back to top ↑