Skip to content

Full overhaul: API updates, UI/UX redesign, audio generation support #38

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
CloudCompile merged 4 commits into from
May 8, 2026
Merged

Full overhaul: API updates, UI/UX redesign, audio generation support #38

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
43a5487
Full overhaul: API updates, UI/UX redesign, audio generation support
claude May 8, 2026
8b5bf0d
Expand design system tokens and enhance Sidebar component
claude May 8, 2026
db29dcd
Enhance ChatInput component styling and accessibility
claude May 8, 2026
bfd54da
Enhance MessageArea styling with better interactions and animations
claude May 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
588 changes: 156 additions & 432 deletions react-app/src/App.jsx
View file
Open in desktop

Large diffs are not rendered by default.

1,076 changes: 425 additions & 651 deletions react-app/src/components/ChatInput.css
View file
Open in desktop

Large diffs are not rendered by default.

646 changes: 235 additions & 411 deletions react-app/src/components/ChatInput.jsx
View file
Open in desktop

Large diffs are not rendered by default.

265 changes: 243 additions & 22 deletions react-app/src/components/MessageArea.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,10 +57,18 @@
transition: all var(--transition-fast);
background: transparent;
color: var(--text-secondary);
border: 1px solid transparent;
}

.header-icon-btn:hover {
background: var(--sidebar-item-hover);
color: var(--text-primary);
}

.header-icon-btn:focus-visible {
outline: none;
border-color: var(--border-focus);
box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 3px var(--border-focus);
}

.header-icon-btn svg {
Expand Down Expand Up @@ -131,6 +139,13 @@

.user-dropdown-item:hover {
background: var(--sidebar-item-hover);
color: var(--text-primary);
}

.user-dropdown-item:focus-visible {
outline: none;
background: var(--sidebar-item-hover);
box-shadow: inset 0 0 0 1px var(--border-focus);
}

.accent-preview {
Expand Down Expand Up @@ -683,27 +698,113 @@ body.dark .reasoning-content {
margin-top: 0.75rem;
}

/* ── Welcome screen ───────────────────────────────────────── */
.welcome-screen {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
color: var(--text-primary);
padding: 2rem;
min-height: 200px;
padding: 3rem 2rem 2rem;
gap: 1.75rem;
}

.welcome-logo {
width: 56px;
height: 56px;
border-radius: 18px;
background: var(--accent-gradient);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 20px rgba(124,165,142,0.35);
animation: fadeInScale 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
.welcome-logo svg { width: 28px; height: 28px; color: #fff; }

.welcome-text {
font-size: 2.5rem;
font-weight: 600;
background: linear-gradient(45deg, #b9f8cf, #aeead6, #ffd3f5, #ffb4c5);
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
letter-spacing: -0.02em;
background: linear-gradient(135deg, #b9f8cf 0%, #aef5d6 30%, #ffd3f5 70%, #ffb4c5 100%);
background-size: 300% 300%;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin: 0;
animation: fadeInScale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), gradientFlow 8s ease infinite;
animation: fadeInScale 0.6s cubic-bezier(0.34,1.56,0.64,1), gradientFlow 8s ease infinite;
}

.welcome-sub {
font-size: 0.9375rem;
color: var(--text-muted);
margin: -0.75rem 0 0;
animation: fadeIn 0.8s ease-out 0.1s both;
}

.welcome-feature-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.625rem;
max-width: 460px;
width: 100%;
animation: fadeIn 0.8s ease-out 0.2s both;
}

.welcome-feature-card {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
background: var(--bg-elevated);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
text-align: left;
transition: all var(--transition-fast);
cursor: default;
}

.welcome-feature-card:hover {
border-color: rgba(124,165,142,0.3);
box-shadow: var(--shadow-sm);
transform: translateY(-2px);
background: var(--bg-elevated);
}

body.light .welcome-feature-card {
background: #fff;
border-color: #e5e7eb;
box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

body.light .welcome-feature-card:hover {
border-color: rgba(124,165,142,0.4);
box-shadow: 0 4px 12px rgba(124,165,142,0.1);
}

.welcome-feature-icon {
font-size: 1.25rem;
line-height: 1;
flex-shrink: 0;
}

.welcome-feature-text {
display: flex;
flex-direction: column;
gap: 0.1rem;
}

.welcome-feature-title {
font-size: 0.8125rem;
font-weight: 600;
color: var(--text-primary);
line-height: 1.2;
}

.welcome-feature-desc {
font-size: 0.75rem;
color: var(--text-muted);
line-height: 1.3;
}

@keyframes gradientFlow {
Expand Down Expand Up @@ -979,14 +1080,21 @@ body.dark .reasoning-content {
}

.theme-card:hover {
border-color: var(--accent-gradient);
border-color: rgba(124,165,142,0.6);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}

.theme-card:focus-visible {
outline: none;
border-color: var(--border-focus);
box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 3px var(--border-focus);
}

.theme-card.active {
border-color: var(--c3);
border-color: var(--brand-green);
background: var(--sidebar-item-active);
box-shadow: var(--shadow-sm);
}

.theme-card-preview {
Expand Down Expand Up @@ -1631,31 +1739,144 @@ body.dark .error-details {
box-shadow: none !important;
}

/* Image Generation Styles */
.message-image-container {
margin-bottom: 0.5rem;
border-radius: 12px;
/* ── Media cards (image / video / audio) ──────────────────── */
.media-card {
margin-bottom: 0.75rem;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--bg-secondary);
background: var(--bg-elevated);
border: 1px solid var(--border-color);
transition: all var(--transition-fast);
max-width: 400px;
box-shadow: var(--shadow-sm);
transition: box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
max-width: 480px;
animation: slideInFromLeft 0.3s ease-out;
}

.message-image-container:hover {
border-color: var(--c3);
.media-card:hover {
border-color: var(--brand-magenta);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}

.message-image {
.media-card-img {
width: 100%;
height: auto;
display: block;
max-width: 100%;
max-height: 420px;
object-fit: contain;
max-height: 400px;
background: var(--bg-secondary);
}

.media-card-video {
width: 100%;
display: block;
max-height: 360px;
border-radius: 0;
background: #000;
}

.media-card-meta {
padding: 0.625rem 0.875rem;
border-top: 1px solid var(--border-light);
background: var(--bg-secondary);
display: flex;
flex-direction: column;
gap: 0.25rem;
}

.media-meta-row {
display: flex;
align-items: baseline;
gap: 0.5rem;
font-size: 0.78rem;
}
.media-meta-label {
color: var(--text-muted);
font-weight: 600;
text-transform: uppercase;
font-size: 0.68rem;
letter-spacing: 0.04em;
flex-shrink: 0;
}
.media-meta-value {
color: var(--text-secondary);
word-break: break-word;
}

/* Audio card */
.audio-card { max-width: 400px; }

.audio-card-header {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.875rem 1rem;
}

.audio-card-icon {
width: 36px;
height: 36px;
border-radius: 10px;
background: var(--accent-gradient);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.audio-card-icon svg { width: 18px; height: 18px; color: #fff; }

.audio-card-info {
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.audio-card-title { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); }
.audio-card-voice { font-size: 0.75rem; color: var(--text-muted); }

.audio-player {
width: 100%;
height: 36px;
border-radius: 0;
border-top: 1px solid var(--border-light);
outline: none;
background: var(--bg-secondary);
}

.audio-transcript {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 0.625rem 0.875rem;
border-top: 1px solid var(--border-light);
background: var(--bg-secondary);
}
.audio-transcript-label {
font-size: 0.68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-muted);
}
.audio-transcript-text {
font-size: 0.8375rem;
color: var(--text-secondary);
line-height: 1.4;
}

/* Image Generation Styles — keep legacy for backwards compat */
.message-image-container {
margin-bottom: 0.5rem;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
transition: all var(--transition-fast);
max-width: 400px;
}
.message-image-container:hover { border-color: var(--brand-magenta); box-shadow: var(--shadow-md); }
.message-image {
width: 100%; height: auto; display: block; max-width: 100%;
object-fit: contain; max-height: 400px;
}

.message-attachments {
display: flex;
Expand Down
38 changes: 38 additions & 0 deletions react-app/src/components/MessageArea.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,45 @@ const MessageArea = ({ messages, isGenerating, isUserTyping, onRegenerate }) =>
return (
<main className="messages-area messages-area-empty">
<div className="welcome-screen">
<div className="welcome-logo">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" strokeWidth="0" fill="currentColor" opacity="0.2"/>
<circle cx="12" cy="12" r="3" fill="currentColor"/>
<path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.93 4.93l2.12 2.12M16.95 16.95l2.12 2.12M4.93 19.07l2.12-2.12M16.95 7.05l2.12-2.12"/>
</svg>
</div>
<h1 className="welcome-text" key={welcomeMessage}>{welcomeMessage}</h1>
<p className="welcome-sub">Powered by Pollinations AI — generate text, images, video & audio</p>
<div className="welcome-feature-grid">
<div className="welcome-feature-card">
<span className="welcome-feature-icon">💬</span>
<div className="welcome-feature-text">
<span className="welcome-feature-title">Chat</span>
<span className="welcome-feature-desc">GPT-4, Claude, Gemini & more</span>
</div>
</div>
<div className="welcome-feature-card">
<span className="welcome-feature-icon">🖼️</span>
<div className="welcome-feature-text">
<span className="welcome-feature-title">Images</span>
<span className="welcome-feature-desc">Flux, DALL·E & more</span>
</div>
</div>
<div className="welcome-feature-card">
<span className="welcome-feature-icon">🎬</span>
<div className="welcome-feature-text">
<span className="welcome-feature-title">Video</span>
<span className="welcome-feature-desc">AI-generated video clips</span>
</div>
</div>
<div className="welcome-feature-card">
<span className="welcome-feature-icon">🎵</span>
<div className="welcome-feature-text">
<span className="welcome-feature-title">Audio</span>
<span className="welcome-feature-desc">Text-to-speech, 6 voices</span>
</div>
</div>
</div>
</div>
</main>
);
Expand Down
Loading
Loading