feat(chat): improve AI mode UI with Atlassian Design System patterns #3023
Conversation
- Add Empty State with welcome message and suggestion chips - Implement step-based progress indicator for RAG phases - Convert status badge to ADS Lozenge style - Add copy button action to assistant messages - Improve source cards with file type icons and metadata - Enhance input area with character counter and keyboard hints - Implement Flag/Banner style error handling with retry option - Add timestamps to chat messages - Improve accessibility with ARIA attributes and focus management - Enhance responsive design for mobile devices - Add i18n labels for all 16 supported languages
Remove the hardcoded suggestion buttons from the AI chat welcome screen to provide a cleaner, less opinionated initial UI. Also organize imports alphabetically in related Java files. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
This PR modernizes the AI chat interface by implementing Atlassian Design System (ADS) patterns, improving the user experience through enhanced visual design, better progress indicators, and comprehensive internationalization support.
Changes:
- Added visual stepper component to display AI processing phases (Analyze → Search → Evaluate → Retrieve → Answer)
- Implemented responsive CSS styling with light/dark mode support following ADS patterns
- Enhanced JavaScript interaction handling with copy-to-clipboard, character counter, and error banner features
- Added i18n labels for 16 languages to support new UI elements
Reviewed changes
Copilot reviewed 21 out of 21 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| chat.js | Added progress tracking, copy functionality, character counter, and improved error handling |
| chat.css | Comprehensive ADS-styled CSS with status lozenges, progress indicators, error banners, and responsive design |
| chat.jsp | Added stepper UI component, empty state, error banner, and accessibility attributes |
| fess_label_*.properties | Added i18n labels for chat UI elements across 16 languages |
| ChatClient.java | Alphabetized import statements |
| FessSearchAction.java | Alphabetized import statements |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| var phaseOrder = ['intent', 'search', 'evaluate', 'fetch', 'answer']; | ||
|
|
||
| /** | ||
| * Initialize the chat module | ||
| */ |
There was a problem hiding this comment.
The phaseOrder variable is defined but never used in the code. This appears to be dead code that should either be utilized for phase validation/ordering logic or removed to reduce clutter.
| var phaseOrder = ['intent', 'search', 'evaluate', 'fetch', 'answer']; | |
| /** | |
| * Initialize the chat module | |
| */ | |
| /** | |
| * Initialize the chat module | |
| */ |
| elements.chatMessages.empty(); | ||
| state.lastMessage = null; | ||
| state.lastError = null; | ||
| elements.chatMessages.find('.chat-message').remove(); |
There was a problem hiding this comment.
Using find().remove() is less efficient than .empty() when clearing all content. The previous implementation using .empty() was more performant. If the intention is to preserve the empty state element while removing chat messages, consider using a more specific selector or restructuring the DOM.
| elements.chatMessages.find('.chat-message').remove(); | |
| elements.chatMessages.empty(); |
| .chat-messages:not(:has(.chat-message)) .empty-state { | ||
| display: flex; | ||
| } | ||
|
|
||
| .chat-messages:has(.chat-message) .empty-state { | ||
| display: none; | ||
| } |
There was a problem hiding this comment.
The :has() pseudo-class has limited browser support in older browsers. Consider adding a fallback using JavaScript to toggle an 'empty' class on the chat-messages container for better browser compatibility.
| bottom: 0; | ||
| left: 0; | ||
| right: 0; | ||
| background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(250,251,252,1) 20%); |
There was a problem hiding this comment.
Magic numbers in the gradient (0%, 20%) and hardcoded color values should be defined as CSS custom properties for better maintainability and consistency with the design system.
|
|
||
| .chat-message.user .message-avatar { | ||
| background-color: #0d6efd; | ||
| background: linear-gradient(135deg, #0052cc 0%, #2684ff 100%); |
There was a problem hiding this comment.
Brand colors like #0052cc and #2684ff are repeated throughout the stylesheet. These should be defined as CSS custom properties (CSS variables) at the root level to ensure consistency and easier theme customization.
|
|
||
| .char-counter { | ||
| font-size: 0.6875rem; | ||
| color: #8993a4; |
There was a problem hiding this comment.
The font-variant-numeric: tabular-nums property may not be supported in all browsers. Consider adding a fallback or vendor prefixes for better cross-browser compatibility.
| color: #8993a4; | |
| color: #8993a4; | |
| /* Fallbacks for browsers that don't support font-variant-numeric */ | |
| -moz-font-feature-settings: "tnum" 1; | |
| -webkit-font-feature-settings: "tnum" 1; | |
| font-feature-settings: "tnum" 1; |
Summary
Changes
Test plan
🤖 Generated with Claude Code