Using iMessage Components in Astro.js

Message bubble is a must for migrating to Astro. I had a horribly coded version on my Jekyll blog, but I was always too lazy to optimize it. Now with the power of Astro.js, I have the chance to design one from ground up.

I’ve created a reusable component that mimics the familiar iOS iMessage style. Here’s how it looks in action:

Basic Conversation Example

Add a conversation by using a code block with the message language:

Private Chat with Chat Title

Display a chat title for a private conversation:

You can also set a custom chat title:

Group Chat Example

Group chats automatically show avatars for each person’s last message in a sequence:

Showing Names in Group Chats

You can show names above message groups:

Showing Message Tails

By default, message tails are hidden. You can enable them:

Custom Timestamp

Set a custom timestamp that will appear only on the final message:

Combined Options

You can combine multiple options:

How It Works

The plugin automatically:

1. Parses messages from the text format
2. Identifies your messages based on the myMessageName in site configuration (Dylan Xu)
3. Shows your messages as outgoing (blue bubbles) and others as incoming (gray bubbles)
4. Automatically shows avatars for the last message in each group from each sender
5. Adds increased spacing between different people’s message groups
6. Shows custom time only on the final message of the conversation (when specified)

Configuration Options

• chatTitle: Show a chat title header (true, false, or a custom title)
• time: Show a custom time on the final message only (time=14:30)
• tails: Show message tails (true or false, default is false)
• showNames: Show sender names above message groups (true or false)

Advanced Usage in MDX Files

For more control, you can use components in MDX files:

import MessageConversation from '../components/MessageConversation';

 Settings > Export', sender: 'Dylan Xu', showTimestamp: true, timestamp: '10:32 AM' },
    { message: 'Found it, thanks!', sender: 'John Smith', showTimestamp: true, timestamp: '10:33 AM' }
  ]}
/>

Or parse raw text:

import MessageParser from '../components/MessageParser';