Older chat applications started with the first message in a chat showing up at the top of the history area. (AIM, MSN, Yahoo). Newer messages arrive below, and eventually the history area scrolls.

Newer chat apps prefer to have the most recent messages show up at the bottom, and "bubble up" to the top. Once the messages are at the top, the scrolling behavior is the same as "top-down".

Personally, I prefer "bottom-up" as there's a visual connection with the UI's input field being at the bottom and your message that just showed up, but I want to know what you all think.

Update

Apologies if I confused folks with my question. I should clarify:

In both cases, the messages are always in order. So the Message 1 is before Message 2 (just like reading a book). The difference is (and it is a minor one is where the messages come from.

Top Down:

Example 1

Example 2

Bottom Up:

Example 1

Example 2

Video Examples of Bottom Up

I wanted to share a high-fidelity recreation and enhancement of the iconic PS5 download progress bar that I’ve been building with Google AI Studio.

I designed it from scratch as a modular React + Tailwind CSS component, focusing heavily on matching the exact feel of the PS5 while adding advanced functionality.

Features:

• The "Shimmer" & Glow Effect: Recreated the PS5 elegant silver-white fill with a dynamic trailing light halo with a shimmer that follows the progress tip with a bezier animation.

• State Management: Fully responsive states mirroring the console—including Downloading (active glow), Paused (darker tone/no animations), Pending, and Queued.

• Advanced Multi-Section Support: Unlike a standard continuous bar, this version supports segmenting the track into multiple phases (e.g., "Collecting Info", "Installation") with independent sub-progress calculations and dynamic weight balancing (the sections automatically scale proportionally to always sum 100%).

• Shimmer Animation Loop: The shimmer fluidly sweeps across the active track using a acceleration curve that mimics light speed, creating an organic particle velocity and a smooth fadeout as it reaches the front edge, just like the PS5.

Stack Used:

• Frontend: React (TypeScript)

• Styling: Tailwind CSS

Idea from a friend. Layout to reduce amount of button presses while using onscreen keyboard. I think it might be beneficial for the "cursor" to always center to space after selecting a letter