MessageGroup
Group consecutive messages from the same author.
app.tsx
import { MessageGroup } from '@superinterface/react'
export const Group = ({ group }) => <MessageGroup messageGroup={group} />
Props
Subcomponents
MessageGroup.Root
Wrap other primitives with
MessageGroup.Root to customize layout or styling.app.tsx
<MessageGroup.Root
messageGroup={group}
className="p-2"
>
<MessageGroup.Content>
<MessageGroup.Messages />
</MessageGroup.Content>
</MessageGroup.Root>
MessageGroup.Name
Render the author's display name.
app.tsx
<MessageGroup.Root messageGroup={group}>
<MessageGroup.Name className="text-sm font-bold" />
<MessageGroup.Messages />
</MessageGroup.Root>
MessageGroup.AssistantAvatar
Override the assistant avatar for the group. Use
MessageGroup.AssistantAvatar.Root to inject a custom avatar component.app.tsx
<MessageGroup.Root messageGroup={group}>
<MessageGroup.AssistantAvatar.Root>
<Avatar
avatar={{
type: 'ICON',
iconAvatar: { name: 'ROCKET' },
imageAvatar: null,
}}
/>
</MessageGroup.AssistantAvatar.Root>
<MessageGroup.Messages />
</MessageGroup.Root>
MessageGroup.UserAvatar
Similarly, customize the user avatar with
MessageGroup.UserAvatar.Root.app.tsx
<MessageGroup.Root messageGroup={group}>
<MessageGroup.UserAvatar.Root>
<Avatar
avatar={{
type: 'IMAGE',
imageAvatar: { url: '/me.png' },
iconAvatar: null,
}}
/>
</MessageGroup.UserAvatar.Root>
<MessageGroup.Messages />
</MessageGroup.Root>
MessageGroup.Messages
Renders the messages within the group.
app.tsx
<MessageGroup.Root messageGroup={group}>
<MessageGroup.Messages />
</MessageGroup.Root>
MessageGroup.Content
Wrap
MessageGroup.Messages and other children in a content container.app.tsx
<MessageGroup.Root messageGroup={group}>
<MessageGroup.Content>
<MessageGroup.Messages />
</MessageGroup.Content>
</MessageGroup.Root>