Message

User and assistant turns in the Codex transcript.

import { CodexMessage } from "../components/codex-message";
import { CodexTerminal } from "../components/codex-terminal";
import { CODEX_DEMO_SESSION } from "../constants/codex-demo";

export default function CodexMessageExample() {
  return (
    <div className="w-full p-6">
      <CodexTerminal title={CODEX_DEMO_SESSION.title}>
        <CodexMessage from="user">
          {CODEX_DEMO_SESSION.userMessage}
        </CodexMessage>
        <CodexMessage>{CODEX_DEMO_SESSION.intro}</CodexMessage>
      </CodexTerminal>
    </div>
  );
}

$ bunx --bun shadcn@latest add @notra/codex-message

from="user" draws the turn on a full-width gray band with a dim ›. Assistant turns, the default, start with a dim • in the gutter and stack their children with a blank line between them, so paragraphs, lists and tables read like Codex’s rendered markdown. Both render a div and take all of its props.

Prop	Default	Description
`from`	`assistant`	`user` or `assistant`.

Used in

Codex

A full recreation of an OpenAI Codex CLI session, from the banner to the pinned prompt.