ContextQMD
Back to Copilotkit

Message

showcase/shell-docs/src/content/reference/bot/components/Message.mdx

1.60.11.9 KB
Original Source

Overview

Message is the root container for one posted message. Every card you post with thread.post starts with a Message wrapping the blocks that make it up — headers, sections, fields, action rows.

Import

tsx
import { Message } from "@copilotkit/bot-ui";

Props

<PropertyReference name="accent" type="string"> Accent color (hex, e.g. `"#27AE60"`) for the message's colored rail. On Slack, Block Kit has no native accent, so an accented message is posted as an attachment with a colored left bar (`attachments: [{ color, blocks }]`). </PropertyReference> <PropertyReference name="children" type="BotChildren"> The message's blocks: [`Header`](/reference/bot/components/Header), [`Section`](/reference/bot/components/Section), [`Fields`](/reference/bot/components/Fields), [`Context`](/reference/bot/components/Context), [`Actions`](/reference/bot/components/Actions), [`Image`](/reference/bot/components/Image), [`Divider`](/reference/bot/components/Divider), [`Table`](/reference/bot/components/Table). </PropertyReference>

Usage

tsx
import { Message, Header, Section, Context } from "@copilotkit/bot-ui";

function IssueCard({ id, title }: { id: string; title: string }) {
  return (
    <Message accent="#5865F2">
      <Header>{id}</Header>
      <Section>{title}</Section>
      <Context>Updated just now</Context>
    </Message>
  );
}

On Slack

Renders as the message's blocks array — capped at 50 blocks per message (SLACK_LIMITS.blocksPerMessage); the renderer clamps overflow instead of failing. With accent, the blocks move into a colored attachment.