Full overhaul: API updates, UI/UX redesign, audio generation support - #38
Merged
Merged
Conversation
API (api.js):
- Fix video endpoint to use /video/{prompt} (was incorrectly /image/{prompt})
- Add generateAudio() using GET /audio/{text}?voice=&model=
- Add audio models endpoint (/audio/models) to loadModels/initializeModels
- Consistent parseApiError() for 401/402/403 and structured error JSON
- Remove hardcoded token fallback; VITE_POLLINATIONS_API_KEY or unauthenticated
UI/UX overhaul:
- theme.css: refined tokens — radius, shadow, border; improved dark mode depth
- ChatInput: Chat/Image/Video/Audio mode pills replace slash commands; voice selector; polished input card
- App.jsx: wire audio generation + audio models; default theme dark; cleaner handlers
- MessageBubble: audio player card with voice/model metadata; media-card layout for image/video; copy-feedback
- MessageArea: feature-card welcome screen (Chat, Image, Video, Audio); logo + subtitle
- Sidebar: brand logo dot/wordmark; timestamps on chat items; clear-all; icon-row quick actions
https://claude.ai/code/session_0123K4e3ay6qWfSGVHD7Q2SS
|
🤖 PR Summary by Pollinations.AI SummaryThe Pollinations legacy text API is being deprecated for authenticated users. Please migrate to our new service at https://enter.pollinations.ai for better performance and access to all the latest models. Note: Anonymous requests to text.pollinations.ai are NOT affected and will continue to work normally. Risk Level: medium Diff Stats
This comment updates automatically. |
Phase 1: Design System Foundation - Added comprehensive typography variables (font-size, font-weight, line-height, letter-spacing) - Introduced spacing scale (--spacing-0.5 through --spacing-8) - Added neutral gray color palette (--color-gray-50 through --color-gray-900) - Expanded gradient system (soft, vibrant, neutral, success, warning, error) - Centralized z-index scale for better layer management - Added animation keyframes (fadeIn, fadeOut, slideIn, scaleIn, bounce, pulse, shimmer, spin) Phase 2: Sidebar Component Enhancements - Improved icon button focus states with accessible ring styling - Enhanced chat item hover and focus states for better UX - Added keyboard navigation support (Enter/Space to activate chat items) - Improved touch targets on mobile (44px minimum) - Enhanced empty state message with visual indicator - Added comprehensive aria labels and aria-current to all sidebar elements - Better mobile responsiveness with proper animations https://claude.ai/code/session_0123K4e3ay6qWfSGVHD7Q2SS
Improvements to ChatInput CSS: - Added focus states for mode pills, voice selector, toolbar buttons, send button - Improved touch targets on mobile (44px minimum for buttons) - Better disabled state styling across all inputs - Enhanced voice selector with improved hover and focus states - Better placeholder styling with improved opacity - Added active state feedback for send button - Improved mobile responsiveness with better spacing and layout adjustments - Better animations and transitions Improvements to ChatInput JSX: - Added aria labels to all interactive elements (mode pills, buttons, selectors) - Added role="tablist" and role="tab" for mode pill accessibility - Added aria-selected, aria-expanded, and aria-describedby attributes - Better title attributes for all buttons - Improved keyboard navigation support Mobile optimizations: - Touch targets increased to 40px+ on tablets, 44px+ on phones - Better spacing and layout for small screens - Improved mode pill visibility with proper scaling https://claude.ai/code/session_0123K4e3ay6qWfSGVHD7Q2SS
Improvements to MessageArea CSS: - Added hover effects with subtle lift animations to feature cards - Added focus states to header icon buttons and dropdowns - Added focus states to theme cards with proper keyboard navigation - Enhanced media card animations with slideIn effect and hover lift - Better transitions and transform effects for visual feedback - Improved user dropdown item styling with better focus states - Better active state styling for theme cards - Improved touch feedback and visual hierarchy These changes improve the overall polish and accessibility of the message display area, making the UI feel more responsive and delightful while maintaining good keyboard navigation support. https://claude.ai/code/session_0123K4e3ay6qWfSGVHD7Q2SS
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
$(cat <<'EOF'
Summary
/video/{prompt}not/image/{prompt}), addedgenerateAudio()viaGET /audio/{text}, added audio models fetching, consistent error parsing for 401/402/403 shape, removed hardcoded token fallbackChat | Image | Video | Audiomode pills; redesigned input card, theme tokens, sidebar, welcome screen, and message bubblesChanges
src/utils/api.js/image/{prompt}, now uses/video/{prompt}generateAudio(text, options)— callsGET /audio/{text}?voice=&model=/audio/modelstoloadModels()andinitializeModels()(returnsaudioModels)parseApiError()reads structured{ error: { code, message } }response shape; maps 401/402/403 to friendly messagessk_...token fallback; usesVITE_POLLINATIONS_API_KEYenv var or sends unauthenticatedsrc/theme.css--radius-*,--shadow-*scale,--bg-elevated,--bg-input,--border-focus#0d0d0dbase, layered elevation)src/components/ChatInput.jsx+ChatInput.cssChat | Image | Video | Audiobuttons at the top of the input cardalloy,echo,fable,onyx,nova,shimmer)src/App.jsxhandleGenerateAudio()→generateAudio()from api.jsaudioModels,selectedAudioModel,onAudioModelChangedark; error messages now show actual error textsrc/components/MessageBubble.jsx<audio>controls, transcript, model metadatamedia-card+media-card-metalayoutsrc/components/MessageArea.jsx+MessageArea.css.media-card,.audio-card,.audio-player,.audio-transcript,.media-meta-rowsrc/components/Sidebar.jsx+Sidebar.css2h ago,Mon) beneath titlethemeprop drives light/dark sun/moon iconTest plan
npm run devinreact-app/)https://claude.ai/code/session_0123K4e3ay6qWfSGVHD7Q2SS
EOF
)
Generated by Claude Code