Chat Transcript
We needed to show what a person and an AI agent said to each other, and the earlier attempt was only sketch code on a demo page.
Five shared components now show a chat session: speech bubbles, folding tool calls, and a small ruler for jumping between turns. They're documented and reusable.
Documents
With file names, on their own page →What changed
The two changes that matter most, in plain words. Open any one to see it.
- 1
The chat panel now looks like the design: bubbles for each speaker, tool runs folded into one line, and a turn ruler on the left.
From the design to a working panel · came from Mark Parsonopen →
- 2
A stack of short lines beside the chat stands for its turns; hover to see each turn's title, click to jump there.
A ruler for jumping between turns · came from Mark Parson
- The panel, the ruler, a turn, a message and a tool call are each their own documented part in the shared library. New in this cycle
- A short chat takes only the room it needs; a long one scrolls inside the panel, never the whole page. In words
How we got here
Each change, traced back to the conversation it came from. A solid mark means the record names the source; a dashed one was matched by the draft and waits for review.
From the record: no recorded conversation behind this one.
c85-D1 Build the transcript parts directly in the shared library, and document them only after a manual design pass. — Mark Parson
c85-D3 The speech-bubble tail uses Mark's skewed-square technique, coloured from the theme's own variables. — Mark Parson
The chat panel now looks like the design: bubbles for each speaker, tool runs folded into one line, and a turn ruler on the left.
From the record: no recorded conversation behind this one.
c85-D2 The turn navigator works like ChatGPT's: horizontal lines that widen on hover and show a title and summary card. — Mark Parson
A stack of short lines beside the chat stands for its turns; hover to see each turn's title, click to jump there.
Thanks to
People outside Qpoint first. Every thank-you points at something they said or made.
Set the design and the bubble tail
Supplied the labelled design, asked for a ChatGPT-style turn navigator, and contributed the skewed-square tail the bubbles now use.
All images
Every picture from this cycle. Click any one to step through them all.
The pairs
Everything captured · 3
The full record 0 decisions · 4 key-change entries · 1,068 words · 2 captures
The record stays as written, for agents and for audit: Key Changes, every decision, the artifacts and the visual record.
Open the record for c85 →