Message

User prompts and assistant replies in the OpenCode transcript.

import { OpencodeMessage } from "../components/opencode-message";
import { OpencodeSources } from "../components/opencode-sources";
import { OpencodeTurnFooter } from "../components/opencode-turn-footer";
import { OpencodeWindow } from "../components/opencode-window";
import {
  OPENCODE_DEMO_QUERIES,
  OPENCODE_DEMO_SOURCES,
} from "../constants/opencode-demo";

export default function OpencodeMessageExample() {
  return (
    <div className="w-full p-6">
      <OpencodeWindow className="gap-[1lh] px-[2ch] py-[1lh]">
        <OpencodeMessage from="user">
          which changelog tools do AI assistants recommend?
        </OpencodeMessage>
        <OpencodeMessage
          search={
            <OpencodeSources
              queries={OPENCODE_DEMO_QUERIES.slice(0, 1)}
              sources={OPENCODE_DEMO_SOURCES.slice(0, 3)}
            />
          }
        >
          <p>
            <strong>Notra</strong> comes up most, next to hand-written{" "}
            <code>CHANGELOG.md</code> files and GitHub releases.
          </p>
        </OpencodeMessage>
        <OpencodeTurnFooter duration="6.3s" />
      </OpencodeWindow>
    </div>
  );
}

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

from="user" renders the prompt on a raised panel with a blue rule on the left. Assistant replies, the default, are indented plain text. Markup inside a reply takes the TUI’s markdown colors: headings and strong in bold orange, code in green, and list items get an orange dash.

Space the transcript one line apart, like the terminal, with gap-[1lh] on the parent.

Prop	Default	Description
`from`	`assistant`	`user` or `assistant`.
`search`		Rendered above an assistant reply, usually `OpencodeSources`.
`actions`		Rendered below an assistant reply.

Used in

OpenCode

A recreation of an OpenCode terminal session with a transcript, the prompt and the sidebar.