Can you make a markdown of this note pleas
Blocks
Chat
Complete chat recipe with messages, tools, attachments, markdown, and composer.
Composition
How the block recipe nests its exported parts and installed agent primitives.
Thread recipe
The block keeps model/runtime state outside the UI and composes owned agent surfaces.
ChatBlock├── ChatScene│ └── ChatThread│ ├── ChatTurn from="user"│ │ ├── InlineAttachment│ │ ├── ChatMessage│ │ └── ActionBar│ └── ChatTurn from="assistant"│ ├── ChatThought│ ├── ChatMessage│ │ └── MarkdownBlock│ └── ActionBar└── ChatInput └── ChatInputShell ├── ChatInputTextarea └── ChatInputToolbar ├── ChatInputTools └── ChatInputSubmitnpx shadcn@latest add http://127.0.0.1:3000/r/refined/chat-block.jsonUsage
import { ChatBlock, type ChatBlockReply } from "@/components/refined-ui/blocks/chat";type MastraTextMessageInput = { role: "user"; content: { format: 2; parts: [{ type: "text"; text: string }]; };};function createMastraTextMessage(text: string): MastraTextMessageInput { return { role: "user", content: { format: 2, parts: [{ type: "text", text }], }, };}async function runMastraMessage(message: MastraTextMessageInput): Promise<ChatBlockReply> { const text = message.content.parts[0].text; const trace = "Mastra MessageFactory can map this content.format=2 message into Refined UI props."; return { assistantLabel: "Mastra", modelLabel: "Mastra agent", text: `Received "${text}". ${trace}`, copyValue: `${trace}\n\n${text}`, };}export function ChatSurface() { return ( <ChatBlock assistantLabel="Mastra" modelLabel="Mastra agent" createReply={(value) => runMastraMessage(createMastraTextMessage(value))} /> );}Agents used
The block command installs the recipe and these agent source files in one pass.
Block recipe
Action barsrc/registry/blocks/chat.tsxsrc/registry/sources/refined/action-bar.tsxInline attachmentsrc/registry/sources/refined/inline-attachment.tsxMarkdown blocksrc/registry/sources/refined/markdown-block.tsxChat scenesrc/registry/sources/refined/chat-scene.tsxBase UI Collapsible slot
src/registry/sources/refined/ui/collapsible.tsxButton slot
Chat inputsrc/registry/sources/refined/ui/button.tsxsrc/registry/sources/refined/chat-input.tsxChat messagesrc/registry/sources/refined/chat-message.tsx