Docs
Chat Message Area

Chat Message Area

A component that adds auto scrolling functionality to a list of chat messages.

Can you tell me a story? Maybe something about a magical forest?

Of course! I'd love to tell you a story about the Whispering Woods. Would you like to hear it?

Yes, please! I'm excited to hear it!

Deep in the heart of the Whispering Woods, there lived a young fox named Luna with fur as silver as moonlight. Unlike other foxes, Luna had the magical ability to speak with the ancient trees that surrounded her home.

One day, Luna discovered that the oldest tree in the forest had fallen silent. This was very unusual, as this particular oak tree loved telling stories about the forest's history. Concerned, Luna decided to investigate.

Oh no! What happened to the old oak tree?

As Luna approached the ancient oak, she noticed something glowing at its roots - a tiny crystal that pulsed with a soft blue light. The tree had been protecting this crystal for centuries, and now it was losing its power.

Luna knew she had to help. She gathered dewdrops from spider webs at dawn, collected starlight in flower petals at night, and asked the wind to share its oldest songs. With these magical ingredients, she restored the crystal's power.

Did it work? Did the old oak tree start speaking again?

Yes! The moment the crystal began glowing brightly again, the old oak's leaves rustled with joy, and its deep, wise voice returned. It thanked Luna for her help and shared even more wonderful stories about the forest's ancient magic.

From that day forward, Luna became known as the Guardian of the Whispering Woods, and she made sure to visit the old oak tree every day to hear its wonderful tales.

That was such a beautiful story! I loved how Luna helped save the old oak tree's voice.

I'm glad you enjoyed it! The story teaches us that even the smallest acts of kindness can help preserve the magic in our world.

The Chat Message Area component provides a responsive and intelligent scrollable container specifically designed for streamingchat interfaces. It features a sophisticated auto-scrolling system that adapts to user interaction:

  • Smart Auto-scroll: Automatically scrolls to new messages when they appear, but only if the user is already at the bottom
  • Interaction Awareness: Auto-scroll automatically disables when users scroll up to read previous messages
  • Re-engagement: Auto-scroll re-enables when users manually scroll back to the bottom
  • Mobile Optimized: On touch devices, auto-scroll pauses while the user's finger is on the screen
  • Convenient Navigation: Includes a scroll-to-bottom button that appears when not at the bottom

Installation

pnpm dlx shadcn@latest add https://simple-ai.dev/r/chat-message-area.json

Usage

import { ChatMessageArea } from "@/components/ui/chat-message-area"
<ChatMessageArea className="px-4 py-8 space-y-4">
  {/* Your chat messages go here */}
</ChatMessageArea>

Examples

Alignment

You can align the scroll button to the left, right, or center.

Can you tell me a story? Maybe something about a magical forest?

Avatar
Avatar

Of course! I'd love to tell you a story about the Whispering Woods. Would you like to hear it?

Yes, please! I'm excited to hear it!

Avatar
Avatar

Deep in the heart of the Whispering Woods, there lived a young fox named Luna with fur as silver as moonlight. Unlike other foxes, Luna had the magical ability to speak with the ancient trees that surrounded her home.

Avatar

One day, Luna discovered that the oldest tree in the forest had fallen silent. This was very unusual, as this particular oak tree loved telling stories about the forest's history. Concerned, Luna decided to investigate.

Oh no! What happened to the old oak tree?

Avatar
Avatar

As Luna approached the ancient oak, she noticed something glowing at its roots - a tiny crystal that pulsed with a soft blue light. The tree had been protecting this crystal for centuries, and now it was losing its power.

Avatar

Luna knew she had to help. She gathered dewdrops from spider webs at dawn, collected starlight in flower petals at night, and asked the wind to share its oldest songs. With these magical ingredients, she restored the crystal's power.

Did it work? Did the old oak tree start speaking again?

Avatar
Avatar

Yes! The moment the crystal began glowing brightly again, the old oak's leaves rustled with joy, and its deep, wise voice returned. It thanked Luna for her help and shared even more wonderful stories about the forest's ancient magic.

Avatar

From that day forward, Luna became known as the Guardian of the Whispering Woods, and she made sure to visit the old oak tree every day to hear its wonderful tales.

That was such a beautiful story! I loved how Luna helped save the old oak tree's voice.

Avatar
Avatar

I'm glad you enjoyed it! The story teaches us that even the smallest acts of kindness can help preserve the magic in our world.

Streaming

Try out the auto-scrolling behavior in this live demo. Scroll up to pause auto-scrolling, scroll to bottom to re-enable it, or use the scroll button for quick navigation. On mobile, touch the screen to temporarily pause auto-scroll.

Can you tell me a magical story?

Chat MessageJSX Renderer