Template

Chat

Controlled chat shell that composes rendered turns and a provider-owned composer.

Can you make a markdown of this note pleas

Here's the markdown version. Some handwriting is hard to read, so I marked uncertain parts with [?].

Markdown

Notes

Memory / Studio / Platform / Gallery

Design mode in foreground UI
- Import in website / other
Text editor with [?] modes

Core ideas

Safe area for text edit
Resize -> mobile

Possible components / tools

Motion / video
Full-screen
Mini-browser
Animation
Agent slot
Extension
Demo / memory stream
Game slot
Workflow grid panel / scene / mini
Predefined memory for vibe

UX / Website Builder

You always need to branch
- Less is more
Hierarchy is the key
- Think about advanced users
- Estimate how complex the feature is
- Check if the user can understand it

Open Question

Should we have rules about what is beautiful design?

Composition

Rendered chat shell

<ChatBlock>
- <ChatLayout>
  - <ChatThread>
    - children prop
      - rendered turns
    - composer prop
      - <ChatComposer />
    </ChatThread>
  </ChatLayout>
</ChatBlock>

Installation

First install and activate one skin. Core deliberately contains no visual token defaults.

Registry command

npx shadcn@latest add https://control-ui.dev/r/chat-block.json

See registry manifest

Usage

"use client";

import {

MastraReactProvider,

MessageFactory,

type MessageRoleRendererProps,

type MessageRoleRenderers,

type ToolInvocationPart,

useChat,

} from "@mastra/react";

import type { ReactNode } from "react";

import type { ActivityState } from "@/components/control-ui/activity";

import {

Activity,

ActivityContent,

ActivityDetail,

ActivityDetailContent,

ActivityDetailLabel,

ActivityIcon,

ActivityStatus,

ActivityTitle,

ActivityTrigger,

} from "@/components/control-ui/activity";

import { ChatBlock } from "@/components/control-ui/blocks/chat";

import {

ChatComposer,

ChatComposerShell,

ChatComposerSubmit,

ChatComposerTextarea,

ChatComposerToolbar,

ChatComposerTools,

} from "@/components/control-ui/chat-composer";

import { ChatTurn } from "@/components/control-ui/chat-layout";

import { ChatMessage, ChatMessageBody, ChatMessageContent, ChatMessageRow } from "@/components/control-ui/chat-message";

import { SourceBadge } from "@/components/control-ui/source-badge";

import { Button } from "@/components/control-ui/ui/button";

function activityState(state: string): ActivityState {

if (state === "result" || state === "output-available") return "success";

if (state === "output-error" || state === "output-denied") return "error";

if (state === "partial-call" || state === "input-streaming") return "running";

return "pending";

}

function renderTurn(from: "user" | "assistant", children: ReactNode) {

return (

<ChatTurn from={from}>

<ChatMessage from={from}>

<ChatMessageRow>

<ChatMessageBody>

<ChatMessageContent>{children}</ChatMessageContent>

</ChatMessageBody>

</ChatMessageRow>

</ChatMessage>

</ChatTurn>

);

}

function renderToolInvocation(part: ToolInvocationPart) {

const invocation = part.toolInvocation;

const state = activityState(invocation.state);

return (

<Activity kind="tool" name={invocation.toolName} state={state}>

<ActivityTrigger>

<ActivityIcon />

<ActivityTitle />

<ActivityStatus className="sr-only" />

</ActivityTrigger>

<ActivityContent>

<ActivityDetail>

<ActivityDetailLabel>Input</ActivityDetailLabel>

          <ActivityDetailContent format="code">{JSON.stringify(invocation.rawInput ?? invocation.args, null, 2)}</ActivityDetailContent>

</ActivityDetail>

{invocation.result !== undefined || invocation.errorText ? (

<ActivityDetail>

<ActivityDetailLabel>Output</ActivityDetailLabel>

<ActivityDetailContent className={state === "error" ? "text-destructive-text" : undefined}>

{invocation.errorText ?? JSON.stringify(invocation.result, null, 2)}

</ActivityDetailContent>

</ActivityDetail>

) : null}

</ActivityContent>

</Activity>

);

}

const messageRoles = {

User: ({ children }: MessageRoleRendererProps) => renderTurn("user", children),

Assistant: ({ children }: MessageRoleRendererProps) => renderTurn("assistant", children),

System: () => null,

Signal: ({ children }: MessageRoleRendererProps) => renderTurn("assistant", children),

} satisfies MessageRoleRenderers;

function MastraChat({ agentId }: { agentId: string }) {

const { cancelRun, isRunning, messages, sendMessage } = useChat({ agentId });

const composer = (

<ChatComposer

state={isRunning ? "submitting" : "idle"}

onSubmit={async ({ value, clear }) => {

await sendMessage({ message: value });

clear();

}}

>

<ChatComposerShell>

<ChatComposerTextarea placeholder="Ask the agent..." />

<ChatComposerToolbar>

<ChatComposerTools>Mastra agent</ChatComposerTools>

{isRunning ? (

<Button type="button" size="xs" variant="quiet" onClick={cancelRun}>

Stop

</Button>

) : (

<ChatComposerSubmit>Send</ChatComposerSubmit>

)}

</ChatComposerToolbar>

</ChatComposerShell>

</ChatComposer>

);

return (

<ChatBlock composer={composer}>

{messages.map((message) => (

<MessageFactory

key={message.id}

message={message}

roles={messageRoles}

Text={({ text }) => <span>{text}</span>}

Reasoning={({ reasoning, state }) => (

<Activity kind="reasoning" state={state === "streaming" ? "running" : "success"}>

<ActivityTrigger>

<ActivityIcon />

<ActivityTitle>Reasoning</ActivityTitle>

</ActivityTrigger>

<ActivityContent>{reasoning}</ActivityContent>

</Activity>

)}

ToolInvocation={renderToolInvocation}

SourceUrl={({ title, url }) => <SourceBadge href={url}>{title}</SourceBadge>}

SourceDocument={({ title }) => <span>{title}</span>}

fallback={(part) => <span>Unsupported message part: {part.type}</span>}

/>

))}

</ChatBlock>

);

}

export function ChatSurface({ agentId, baseUrl }: { agentId: string; baseUrl: string }) {

return (

<MastraReactProvider baseUrl={baseUrl}>

<MastraChat agentId={agentId} />

</MastraReactProvider>

);

}

Library dependencies

ChatLayoutchat-layoutAgent

Owned source

This block’s recipe and private support files. Public dependencies stay linked above.

Block recipesrc/registry/blocks/chat.tsx

src/registry/blocks/chat.tsx

import type { ComponentProps, ReactNode } from "react";

import { ChatLayout, ChatThread } from "@/components/control-ui/chat-layout";

export type ChatBlockProps = Omit<ComponentProps<typeof ChatLayout>, "children"> & {

children: ReactNode;

composer: ReactNode;

};

export function ChatBlock({ children, composer, className, ...props }: ChatBlockProps) {

return (

<ChatLayout className={className} {...props}>

<ChatThread composer={composer}>{children}</ChatThread>

</ChatLayout>

);

}