Two-Sided Avatar Chat Message

A chat message thread pattern that anchors sender and receiver avatars to the bottom of each row, with a presence badge on the online avatar.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Two-Sided Avatar Chat Message to your project and fits it to your theme.

import Pattern from "@/components/ui/c-message-2";

export default function Demo() {
  return <Pattern />;
}