ui: polish chat interface with centered empty state and smooth transitions#3
Conversation
… visual fixes - Centered layout with BrandLogo hero when chat is empty, prompt bar elevated inline instead of stuck at bottom - Smooth layout transition (layoutId) when prompt slides from center to bottom on first message - Skeleton shimmer placeholders during starter question loading, replacing the static SVG spinner - Suggestion chips with Sparkles icons, hover effects, responsive grid - Prompt bar: backdrop-blur, visible focus border, submit-only disable (textarea stays editable during streaming) - Streaming cursor: inline CSS pseudo-element instead of block-level span (eliminates line-jump on stream completion) - Fix message bubble padding asymmetry (CSS specificity: prose-agent margin rules moved out of Tailwind layers) - Fix double border on prompt bar (InputGroup border/ring neutralized) - Scroll-to-bottom button: AnimatePresence fade in/out - Skip entry animation on messages transitioning from streaming to final
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: b11bde032e
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| <PromptInputTextarea | ||
| ref={textareaRef} | ||
| placeholder={placeholderText} | ||
| className="border-0 bg-transparent focus-visible:ring-0" | ||
| /> |
There was a problem hiding this comment.
Leaving PromptInputTextarea enabled here makes the existing handleKeyDown logic in frontend/components/ai-elements/prompt-input.tsx user-visible: it calls e.preventDefault() before checking whether the submit button is disabled. During streaming or while follow-up questions are pending, pressing Enter in the now-editable composer drops the keystroke instead of inserting a newline, so users cannot draft multi-line follow-ups until the response finishes.
Useful? React with 👍 / 👎.
…fects) - Replace ref-based streaming transition tracking with role-based approach: assistant messages never animate entry (they are either loaded from history or just streamed — both already visible) - Convert wasAnalyzing ref to state using "set state during render" pattern (React 19 compliant, no effect needed)
Move preventDefault() after the disabled-button check so that pressing Enter while streaming inserts a newline instead of silently dropping the keystroke.
1 participant
Summary
layoutIdtransition to bottom-docked prompt on first messageAnimatePresence mode="popLayout")AnimatePresenceFiles changed
page.tsxpromptBarwithlayoutId, transition tracking refsglobals.css.streaming-cursorpseudo-element,.skeleton-shimmeranimation,.prose-agentfirst/last-child margin fixconversation.tsxAnimatePresencemessage.tsxprompt-input.tsxInputGroupborder/ring to avoid double borderTest plan
rounded-xl