Pick any line to see why it is the way it is: the commit, the pull request and issue it came from, and what the agent was thinking.
| Chat and workspace agents: channels, DMs and named agents you talk to | 1 | --- |
| 2 | // A conversation in Chat, drawn the way the product shows it: a channel or | |
| 3 | // DM header, then <Message> children. For examples in the guides. | |
| 4 | interface Props { | |
| 5 | /** `#web`, or a DM's title. */ | |
| 6 | title: string; | |
| 7 | /** One line under the title, such as the channel's topic. */ | |
| 8 | topic?: string; | |
| 9 | } | |
| 10 | const { title, topic } = Astro.props; | |
| 11 | --- | |
| 12 | ||
| 13 | <figure class="conversation not-content" aria-label={`An example conversation in ${title}`}> | |
| 14 | <header> | |
| 15 | <span class="title">{title}</span> | |
| 16 | {topic && <span class="topic">{topic}</span>} | |
| 17 | </header> | |
| 18 | <div class="messages"><slot /></div> | |
| 19 | </figure> | |
| 20 | ||
| 21 | <style> | |
| 22 | .conversation { | |
| 23 | margin-block: 1.5rem; | |
| 24 | border: 1px solid var(--g1t-line); | |
| 25 | border-radius: 0.875rem; | |
| 26 | background: var(--g1t-surface); | |
| 27 | overflow: hidden; | |
| 28 | } | |
| 29 | header { | |
| 30 | display: flex; | |
| 31 | align-items: baseline; | |
| 32 | gap: 0.6rem; | |
| 33 | padding: 0.7rem 1rem; | |
| 34 | border-bottom: 1px solid var(--g1t-line); | |
| 35 | } | |
| 36 | .title { | |
| 37 | color: var(--g1t-fg); | |
| 38 | font-weight: 600; | |
| 39 | font-size: 0.875rem; | |
| 40 | } | |
| 41 | .topic { | |
| 42 | color: var(--g1t-faint); | |
| 43 | font-size: 0.8125rem; | |
| 44 | overflow: hidden; | |
| 45 | text-overflow: ellipsis; | |
| 46 | white-space: nowrap; | |
| 47 | } | |
| 48 | .messages { | |
| 49 | padding-block: 0.4rem; | |
| 50 | } | |
| 51 | </style> |
