Back to AI chat

AI chat preview

Mermaid diagram in an assistant message

A mermaid fence renders as a themed diagram, loaded on first sight so a chat without diagrams never pays for it. Replay the stream: the source stays readable while it is incomplete and resolves into a diagram once it parses.

  • MermaidDiagram

Here is the outreach flow:

mermaid
graph TD
  fetchLeads[Fetch leads] --> perLead{For each lead}
  perLead --> research[Research]
  research --> gate{Worth pursuing?}
  gate -->|yes| draft[Draft outreach]
  gate -->|no| skip[Skip]
  draft --> approval[Human approval]

Streaming conversation

The full chat kit driven by a self-contained, client-side mock stream: a user turn with an attachment, a streaming reasoning disclosure, a tool call going pending → success, and assistant markdown (with a copyable code block) arriving token by token. Hit Replay to watch it stream again.

  • Conversation
  • ConversationContent
  • ConversationScrollButton
  • Message
  • MessageAvatar
  • MessageContent
  • MessageActions
  • MessageAction
  • CopyAction
  • Response
  • CodeBlock
  • CodeBlockCopyButton
  • Reasoning
  • ReasoningTrigger
  • ReasoningContent
  • ToolCall
  • ToolCallStatusBadge
  • StreamingText
  • TypingIndicator
  • Attachments
  • Attachment
  • PromptInput
  • PromptInputTextarea
  • PromptInputToolbar
  • PromptInputTools
  • PromptInputButton
  • PromptInputSubmit
Assistant
You
current-hero.png20.0 KB
Give me a hero gradient using our theme tokens.