Message

Structured message row with avatar initial, sender name, timestamp, and slot for content.

Use and inspectUse this as a presentational interface around your own submit, stream, or state handlers. Reset preview only remounts the local example; it does not send a request or connect to a model.Next: inspect the source and wire its callback to a bounded backend action.

MessageStructured message row with avatar initial, sender name, timestamp, and slot for content.

import type { ReactNode } from "react";

type MessageProps = {
  role: "user" | "assistant";
  name?: string;
  timestamp?: string;
  children: ReactNode;
};

export function Message({ role, name, timestamp, children }: MessageProps) {
  const initial = (name || role)[0].toUpperCase();
  return (
    <div className={`pk-message pk-message--${role}`}>
      <div className={`pk-message-avatar pk-message-avatar--${role}`}>{initial}</div>
      <div className="pk-message-body">
        <div className="pk-message-meta">
          {name && <span className="pk-message-name">{name}</span>}
          {timestamp && <span className="pk-message-time">{timestamp}</span>}
        </div>
        <div className="pk-message-content">{children}</div>
      </div>
    </div>
  );
}

Props

Prop	Type	Default	Description
`role`*	`"user" \| "assistant"`	—	Controls layout and avatar color
`name`	`string`	—	Sender display name
`timestamp`	`string`	—	Time string shown next to name
`children`*	`ReactNode`	—	Message body content