Skip to content

view on a desktop screen for a better experience.

chat

Chat

A conversation. Write `- you: …` / `- agent: …`. Your turns get the prompt, an italic turn is an aside, and a repeated speaker is not repeated. One sentence someone said is Quote.

session

`speaker: message`. The first speaker is you and gets the prompt. An italic turn is an aside. A repeated speaker is not repeated.

[ SESSION ]
  1. you
    which graph shows a rollback?
  2. agent
    Timeline. Bold the row where you rolled back.
  3. agent
    reads graph-timeline.tsx
  4. agent
    Then Diff for what the rollback changed.
  5. you
    and on GitHub?
  6. agent
    Paste the fenced ASCII. GitHub does not run MDX.

MDX

<Chat title="SESSION">

- you: which graph shows a rollback?
- agent: Timeline. Bold the row where you rolled back.
- agent: *reads graph-timeline.tsx*
- agent: Then Diff for what the rollback changed.
- you: and on GitHub?
- agent: Paste the fenced ASCII. GitHub does not run MDX.

</Chat>

install

command

support thread

you picks the asker. Leave a blank line between turns and a turn can hold paragraphs and code.

[ SUPPORT ]
  1. priya
    the timeline renders empty in our docs
  2. jon
    Do you swap li in mdx-components?

    Wrap the map in withMdxcn and the graphs see list items again.

  3. priya
    that was it

MDX

<Chat title="SUPPORT" you="priya">

- priya: the timeline renders empty in our docs

- jon: Do you swap `li` in mdx-components?

  Wrap the map in `withMdxcn` and the graphs see list items again.

- priya: that was it

</Chat>
[ PROPS ]
PropTypeDefaultDescription
titlestring"chat"Caption drawn on the top edge of the frame.
youstring—The person asking. Defaults to the first speaker.
promptstring">"The glyph on your turns.
childrenMarkdown—A list of `speaker: message` items. Loose items can hold paragraphs and code.
turns{ by, children?, aside? }[]—Data form.
palette"mono" | "duo" | "multi""mono"mono is one accent plus muted. duo paints the second series with --graph-accent-2. multi cycles three accents.
cornerstring"+"Character at each corner of the frame.
classNamestring—Passed to the outer frame.