This document describes the key screens and features of the application.
The home page features:
- Clean, modern design with gradient background
- Three-tab navigation: Chat, Upload, Stats
- Responsive layout that works on all devices
When no messages exist:
- Welcome message displayed
- Helpful prompt to upload documents
- Clean, uncluttered interface
During conversation:
- User messages on the right (blue)
- Assistant messages on the left (gray)
- Avatar icons for each message type
- Timestamp for each message
- "View X sources" link for assistant responses
Features:
- Markdown formatting for assistant responses
- Clickable link to view sources
- Real-time typing indicator while processing
The sources panel shows:
- Source document name
- Page number (for PDFs)
- Relevance score (percentage)
- Text excerpt from the source
- Clean card-based layout
Each source card includes:
- Document icon
- Metadata (file name, page)
- Star rating for relevance
- Highlighted text excerpt
- Hover effects for interactivity
Features:
- Drag-and-drop zone
- File type restrictions (PDF, TXT)
- Clear instructions
- Visual feedback on hover
After selecting a file:
- File preview with name and size
- Remove option
- Upload button becomes active
- File type icon
Success state shows:
- Green success message
- Number of chunks indexed
- Clear visual confirmation
- Instructions for next steps
Error state displays:
- Red error message
- Specific error details
- Retry options
- User-friendly error text
The dashboard displays:
- Total documents count
- Collection name
- Embedding model information
- Gradient cards for visual appeal
Detailed information:
- Document count in large, bold text
- Collection metadata
- Model configuration
- Color-coded cards
Administrative actions:
- Clear all documents button
- Confirmation dialog
- Warning messages
- Refresh statistics button
Mobile optimizations:
- Single column layout
- Full-width messages
- Touch-friendly buttons
- Hamburger menu for tabs
Mobile upload:
- Simplified interface
- Large touch targets
- Optimized file picker
- Mobile-friendly feedback
Tablet layout:
- Adaptive grid
- Sidebar collapse
- Optimized spacing
- Touch and mouse support
Loading indicators:
- Spinning loader icon
- "Thinking..." text
- Disabled input field
- Visual feedback
Upload progress:
- Progress indicator
- "Uploading..." text
- Disabled UI elements
- Cancel option (future)
When backend is offline:
- Clear error message
- Troubleshooting hints
- Retry button
- Support information
File validation:
- Red error highlight
- Specific error message
- Supported formats list
- Clear call to action
Interactive feedback:
- Button hover effects
- Card elevation on hover
- Color transitions
- Cursor changes
Accessibility features:
- Clear focus rings
- Keyboard navigation
- Tab order optimization
- ARIA labels
Primary colors:
- Primary Blue: #0ea5e9
- Success Green: #10b981
- Error Red: #ef4444
- Gray Scale: #1f2937 to #f9fafb
Font system:
- Inter font family
- Clear hierarchy
- Readable sizes
- Proper spacing
Messages and components fade in smoothly when appearing
Loading indicators spin continuously during processing
All interactive elements have smooth color and transform transitions
If you want to update these screenshots:
- Start the application
- Navigate to each section
- Use browser DevTools device toolbar for responsive views
- Capture at 1920x1080 for desktop
- Save as PNG in
screenshots/directory - Use descriptive filenames
When making changes, maintain:
- Consistent spacing (4px grid)
- Rounded corners (8px standard)
- Shadow elevation (3 levels)
- Color contrast (WCAG AA minimum)
- Responsive breakpoints (640px, 768px, 1024px)
Note: Screenshots are not included in this repository but can be generated by running the application and capturing screens as described above.