Timeline messages

The message family contains UserMessage, AssistantMessage, MessageAttachments, and MessageActions. TimelineEntryView uses them for ordinary conversation entries.

Usage

Replace a message renderer through a custom TimelineEntryView. The replacement receives the session item from the semantic timeline entry.

import {
  TimelineEntryView,
  UserMessage,
  type TimelineEntryViewProps,
  type UserMessageProps,
} from '@hyperflow/chakra-ui'

function ProjectUserMessage(props: UserMessageProps) {
  return <UserMessage {...props} />
}

function ProjectEntry(props: TimelineEntryViewProps) {
  return (
    <TimelineEntryView
      {...props}
      userMessageComponent={ProjectUserMessage}
    />
  )
}

Examples

Replace message actions

Use actionsComponent on a message renderer to change the timestamp and copy controls without recreating the message content.

import {
  AssistantMessage,
  type AssistantMessageProps,
  type MessageActionsProps,
} from '@hyperflow/chakra-ui'

function ProjectAssistantMessage(props: AssistantMessageProps) {
  return <AssistantMessage {...props} actionsComponent={ProjectActions} />
}

function ProjectActions({ item }: MessageActionsProps) {
  return <footer>Message actions</footer>
}

Guide

Keep the session item intact

The item prop contains message content and attachments. Forward it to the default component or use the helpers from @hyperflow/react to interpret it.

Replace attachments and actions separately

UserMessage and AssistantMessage expose attachmentsComponent and actionsComponent. Prefer those focused replacement points over recreating the entire message layout.

Preserve message alignment

User messages are aligned to the end of the timeline; assistant messages use the full content column. Keep that distinction unless your product intentionally changes the conversation model.

Props

UserMessage

Prop	Default	Type
`item`	—	`SessionItem` The user message item.
`attachmentsComponent`	`MessageAttachments`	`ComponentType<MessageAttachmentsProps>` Renders attachments.
`actionsComponent`	`MessageActions`	`ComponentType<MessageActionsProps>` Renders message actions.

AssistantMessage

Prop	Default	Type
`item`	—	`SessionItem` The assistant message item.
`isLastInTurn`	—	`boolean` Retained semantic turn metadata.
`attachmentsComponent`	`MessageAttachments`	`ComponentType<MessageAttachmentsProps>` Renders attachments.
`actionsComponent`	`MessageActions`	`ComponentType<MessageActionsProps>` Renders message actions.

MessageAttachments

Prop	Default	Type
`item`	—	`SessionItem` The item whose attachments are rendered.

MessageActions

Prop	Default	Type
`item`	—	`SessionItem` The item whose actions are rendered.
`align`	`"start"`	`"start" \| "end"` Aligns actions below the message.

On this page