feat: add Message AI element component

[rohanchkrabrty]

Summary

• Adds the Message AI-element component to packages/raystack for rendering chat message bubbles with role-based variants
• Includes Message and MessageBubble parts with CSS-module styling and exports from the package root
• Adds unit tests covering rendering, variants, and composition (packages/raystack/components/message/__tests__/message.test.tsx)
• Adds a docs page under the AI Elements section with demos and a props table (apps/www/src/content/docs/ai-elements/message/)
• Stacked on feat: add PromptInput AI element #862 (feat-ai-promptinput) — merge that PR first

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
apsara	Ready	Preview, Comment	Jul 23, 2026 7:16pm

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 70eb6661-9403-483e-accf-04a27fd91719

📥 Commits

Reviewing files that changed from the base of the PR and between 03f022b and 19e67a2.

📒 Files selected for processing (10)

• apps/www/src/content/docs/ai-elements/message/demo.ts
• apps/www/src/content/docs/ai-elements/message/index.mdx
• apps/www/src/content/docs/ai-elements/message/props.ts
• apps/www/src/content/docs/ai-elements/meta.json
• packages/raystack/components/message/__tests__/message.test.tsx
• packages/raystack/components/message/index.tsx
• packages/raystack/components/message/message-bubble.tsx
• packages/raystack/components/message/message.module.css
• packages/raystack/components/message/message.tsx
• packages/raystack/index.tsx

---

📝 Walkthrough

Walkthrough

Adds a composable Message component with alignment, grouping, avatar, header, content, footer, actions, and bubble subcomponents. Adds solid and outline bubble variants with multiple colors, responsive action visibility, public exports, automated tests, and a documentation page with demos, API references, examples, and accessibility guidance.

Sequence Diagram(s)

sequenceDiagram
  participant DocumentationDemo
  participant Message
  participant MessageBubble
  participant MessageStyles
  DocumentationDemo->>Message: renders message composition
  Message->>MessageBubble: renders bubble surface
  Message->>MessageStyles: applies alignment and slot classes
  MessageBubble->>MessageStyles: applies variant and color classes

Loading

Suggested reviewers: rohilsurana, shreyag02

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}