Chat Bubble

A chat bubble renders a single message in a conversation thread. Received messages sit left with a neutral fill; sent messages sit right with the primary fill.

Default Rendered example

Penguin UI

Hi there! How can I assist you today?

I accidentally deleted some important files. Can they be recovered?

Penguin UI

I'm sorry to hear that. Let me guide you through the process to resolve it.

Usage Example

@chatbubble.ChatBubble(chatbubble.Config{
    Side:       chatbubble.Received,
    SenderName: "Penguin UI",
    Message:    "Hi there! How can I assist you today?",
})
@chatbubble.ChatBubble(chatbubble.Config{
    Side:    chatbubble.Sent,
    Message: "I accidentally deleted some important files. Can they be recovered?",
})

With Timestamp

Set Timestamp (e.g. "11:32 AM") to show the send time next to the sender. It surfaces in the header line, so pair it with a SenderName.

With Timestamp Rendered example

Ada 11:32 AM

Did the deploy finish?

You 11:33 AM

Just went green a minute ago.

With Timestamp

@chatbubble.ChatBubble(chatbubble.Config{
    Side:       chatbubble.Received,
    SenderName: "Ada",
    Timestamp:  "11:32 AM",
    Message:    "Did the deploy finish?",
})
@chatbubble.ChatBubble(chatbubble.Config{
    Side:       chatbubble.Sent,
    SenderName: "You",
    Timestamp:  "11:33 AM",
    Message:    "Just went green a minute ago.",
})

With Avatar

Set ShowAvatar: true to render the avatar column. Provide AvatarInitials + AvatarTone for a colored fallback, or AvatarSrc for an image. The avatar flips to the correct side automatically for sent messages.

With Avatar Rendered example

Welcome to the team channel!

Thanks, glad to be here.

With Avatar

@chatbubble.ChatBubble(chatbubble.Config{
    Side:           chatbubble.Received,
    Message:        "Welcome to the team channel!",
    ShowAvatar:     true,
    AvatarInitials: "AL",
    AvatarTone:     avatar.ToneInfo,
})
@chatbubble.ChatBubble(chatbubble.Config{
    Side:       chatbubble.Sent,
    Message:    "Thanks, glad to be here.",
    ShowAvatar: true,
    AvatarSrc:  "/assets/avatar.jpg",
})

Sender Name & Status

SenderName labels a received message. Status renders beneath a bubble; use Sending, Delivered, or Seen on sent messages to convey delivery state.

Sender Name & Status Rendered example

Grace

Pushed the fix — can you review?

On it now.

Delivered

LGTM, approved.

Seen

Sender Name & Status

@chatbubble.ChatBubble(chatbubble.Config{
    Side:       chatbubble.Received,
    SenderName: "Grace",
    Message:    "Pushed the fix — can you review?",
})
@chatbubble.ChatBubble(chatbubble.Config{
    Side:    chatbubble.Sent,
    Message: "On it now.",
    Status:  chatbubble.StatusDelivered,
})
@chatbubble.ChatBubble(chatbubble.Config{
    Side:    chatbubble.Sent,
    Message: "LGTM, approved.",
    Status:  chatbubble.StatusSeen,
})

Grouped (Consecutive)

Set Grouped: true on consecutive messages from the same sender. Grouped bubbles tighten the spacing and suppress the avatar + name so a run of messages reads as one block.

Grouped (Consecutive) Rendered example

Ada

I split the work into three slices.

Taking the first one myself.

Can you grab the second?

Grouped (Consecutive)

@chatbubble.ChatBubble(chatbubble.Config{
    Side:           chatbubble.Received,
    SenderName:     "Ada",
    ShowAvatar:     true,
    AvatarInitials: "AL",
    AvatarTone:     avatar.ToneInfo,
    Message:        "I split the work into three slices.",
})
@chatbubble.ChatBubble(chatbubble.Config{
    Side:    chatbubble.Received,
    Grouped: true,
    Message: "Taking the first one myself.",
})
@chatbubble.ChatBubble(chatbubble.Config{
    Side:    chatbubble.Received,
    Grouped: true,
    Message: "Can you grab the second?",
})

Typing Indicator

@chatbubble.TypingIndicator renders a received-style row with three animated dots and no text — show it while a sender composes a reply.

Typing Indicator Rendered example

Typing Indicator

@chatbubble.TypingIndicator(chatbubble.Config{
    ShowAvatar:     true,
    AvatarInitials: "AL",
    AvatarTone:     avatar.ToneInfo,
})

Go API

v0.2.7

The examples above cover behavior and composition. pkg.go.dev is the canonical reference for exported types, functions, methods, and Go documentation.

github.com/araihu/goshtoso/components/chatbubble

Open v0.2.7 API

Carousel Code Block