Chat

Conversation kit for agent UIs: thread, bubbles, composer, typing state, and tool-call badges. Used by Sage and any TRA agent front end. Keep the thread transparent on the scene — do not wrap it in a second content panel.

Assembled

How did SMS delivery look last week for the dues campaign?

Last week the membership-dues campaign delivered 12,480 messages with 42 failures (~0.3%). Tuesday was the peak day.

Show me failures only for that window.

<div className="flex h-full flex-col">
  <ChatThread>
    <ChatBubble role="user">…</ChatBubble>
    <ToolCallBadge toolName="querySmsWorkflows" status="done" result={data} />
    <ChatBubble role="assistant">
      <Markdown>{reply}</Markdown>
    </ChatBubble>
    <TypingIndicator />
  </ChatThread>
  <ChatComposer onSubmit={send} disabled={busy} />
</div>

Bubbles

role="user" is ember primary. Assistant bubbles use .summit-content — they sit on the scene, not inside another content panel.

When does corp week 42 start?

Corp week 42 runs Monday 13 Oct through Sunday 19 Oct.

<ChatBubble role="user">When does corp week 42 start?</ChatBubble>
<ChatBubble role="assistant">
  <Markdown>Corp week **42** runs Monday 13 Oct through Sunday 19 Oct.</Markdown>
</ChatBubble>

Tool call badge

Status running | done | error. When done and result is set, the chip expands to show JSON.

<ToolCallBadge
  toolName="querySmsWorkflows"
  status="done"
  input={{ campaign: 'membership-dues', from: '2026-07-20', to: '2026-07-26' }}
  result={data}
/>

Typing indicator

<TypingIndicator />

Composer

Enter sends, Shift+Enter adds a line. The field uses .summit-field; the bar is a top hairline only (transparent over the scene — not chrome frost).

<ChatComposer
  onSubmit={send}
  disabled={busy}
  placeholder="Ask anything about your campaigns…"
/>