Chat Message Metadata

Sorry, something went wrong on my end.

2:30 PMFailed

No worries — try again with just the last 24 hours of logs.

2:31 PMRead

The canary at 11:42 AM caused a memory spike. Rolled back at 11:58 AM.

2:32 PM

Usage

Place ChatMessageMetadata below a message or in the last ChatMessageBubble metadata slot to show a timestamp, footer content, and optional delivery status. Non-rendering scalar slots (booleans and empty strings) create no separator; numeric zero remains visible. Composite slot content remains caller-owned.

The row renders nothing at all when timestamp, footer, and status are all absent. The dots between the three parts only appear next to a part that is actually there, so a two-part row reads 2:30 PM · Read and a three-part row reads 2:30 PM · GPT-4o · Read.

vue

<script setup lang="ts">
import { ChatMessageMetadata } from '@astryx-vue/core/Chat'
</script>

<template>
  <ChatMessageMetadata status="read" timestamp="2:30 PM" />
</template>

Anatomy

Element	Description
Metadata row	Sender-aware line containing the visible metadata items.
Timestamp	Caller-supplied time content at the start of the logical sequence.
Footer	Caller-supplied information or actions between time and status.
Status	Localized delivery icon and text when a status is supplied.

Best practices

Guidance	Practices
Do	Put metadata in the last bubble metadata slot when the message uses bubbles, so it follows the bubble content.
Do	Pass timestamp and footer content independently; separators are omitted for non-rendering scalar slots. Composite slot content is used as supplied.
Don't	Do not supply footer actions without their own accessible names and interaction behavior; the metadata row does not own those controls.
Don't	Do not put the same metadata on both a bubble and its enclosing message.

Examples

Common configurations, variations, and states.

Footer Actions

Summarize the Q1 revenue report.

9:41 AMRead

Q1 revenue reached $2.4B, up 18% year-over-year. Enterprise subscriptions drove 62% of the growth, while ad revenue held steady at $890M.

9:42 AM

Assistant message with footer actions: copy, retry, thumbs up/down, and model label. Use for AI responses that need feedback or utility controls.

Status

Deploying the update now…

10:15 AMSending

Config pushed to staging.

10:15 AMSent

Verified on the staging cluster.

10:15 AMDelivered

Looks good — promoting to prod.

10:15 AMRead

Rollback triggered, checking logs.

10:15 AMFailed

All 5 delivery statuses (sending, sent, delivered, read, and error), each with a timestamp. Use to show message delivery progress or surface failures.

Timestamps

Thanks — any blockers I should know about?

2:30 PM

Relative timestamps work too — helpful for older messages where the exact time matters less than recency.

5 months ago

Timestamp-only metadata on user and assistant messages. Supports absolute time and relative formats via Timestamp.

Usage ​