feat(ChatMessage): add color prop and header slot

[maximepvrt]

🔗 Linked issue

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds a color prop and a header slot to the ChatMessage component; forwards color into the component's computed UI configuration. Updates the theme to introduce a color variant (derived from theme colors plus neutral), moves visual class logic into compound variants, and sets color: 'neutral' as a default. Adds documentation for the color prop, a Nuxt playground page for interactive exploration, and expands tests to cover color variants and the new header slot. No existing public declarations or functionality are removed.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main changes: adding a color prop and header slot to the ChatMessage component, which align with the actual modifications across all affected files.
Description check	✅ Passed	The PR description is minimal and lacks implementation details, but the change type (Enhancement) is correctly marked and relates to the changeset's purpose of improving the ChatMessage component.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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 and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

playgrounds/nuxt/app/pages/components/chat-message.vue (1)

19-21: Consider adding required props to UChatMessage.

The UChatMessage component requires id, role, and parts props (or the deprecated content). While content is provided, consider using the recommended parts format with proper id and role for a complete example:

♻️ Suggested enhancement

   <Matrix v-slot="props" :attrs="attrs">
-    <UChatMessage content="My message" v-bind="props" />
+    <UChatMessage
+      id="demo-message"
+      role="user"
+      :parts="[{ type: 'text', text: 'My message' }]"
+      v-bind="props"
+    />
   </Matrix>

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@playgrounds/nuxt/app/pages/components/chat-message.vue` around lines 19 - 21,
The UChatMessage usage currently passes only the deprecated content prop; update
the Matrix slot render to provide UChatMessage with the required props: include
a unique id, a role (e.g., "user" or "assistant"), and the parts array (instead
of content) constructed from the slot props; locate the Matrix v-slot and
replace the UChatMessage attributes so it receives id, role and parts (e.g.,
parts: [{ content_type: "text", text: "My message" }]) while still binding
remaining props via v-bind="props".

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@playgrounds/nuxt/app/pages/components/chat-message.vue`:
- Around line 19-21: The UChatMessage usage currently passes only the deprecated
content prop; update the Matrix slot render to provide UChatMessage with the
required props: include a unique id, a role (e.g., "user" or "assistant"), and
the parts array (instead of content) constructed from the slot props; locate the
Matrix v-slot and replace the UChatMessage attributes so it receives id, role
and parts (e.g., parts: [{ content_type: "text", text: "My message" }]) while
still binding remaining props via v-bind="props".

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: bb48fc2c-84bf-4283-9508-db1616c6bbfd

📥 Commits

Reviewing files that changed from the base of the PR and between 4587079 and 28cc3f1.

⛔ Files ignored due to path filters (4)

• test/components/__snapshots__/ChatMessage-vue.spec.ts.snap is excluded by !**/*.snap
• test/components/__snapshots__/ChatMessage.spec.ts.snap is excluded by !**/*.snap
• test/components/__snapshots__/ChatMessages-vue.spec.ts.snap is excluded by !**/*.snap
• test/components/__snapshots__/ChatMessages.spec.ts.snap is excluded by !**/*.snap

📒 Files selected for processing (6)

• docs/content/docs/2.components/chat-message.md
• playgrounds/nuxt/app/composables/useNavigation.ts
• playgrounds/nuxt/app/pages/components/chat-message.vue
• src/runtime/components/ChatMessage.vue
• src/theme/chat-message.ts
• test/components/ChatMessage.spec.ts

[coderabbitai]

🧹 Nitpick comments (1)

playgrounds/nuxt/app/pages/components/chat-message.vue (1)

19-21: Consider showcasing the new header slot in this playground.

This page already demonstrates the new color behavior well; adding a simple #header example would make the slot addition easier to discover interactively.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@playgrounds/nuxt/app/pages/components/chat-message.vue` around lines 19 - 21,
Add a small example of the new header slot to the playground by updating the
UChatMessage usage inside the Matrix v-slot block: keep the existing props and
parts but add a header slot (e.g., a <template `#header`> or v-slot:header on
UChatMessage) that renders simple header content like a title, role label or
timestamp so users can interactively see the new header slot behavior alongside
the existing color demo; modify the Matrix v-slot="props" / UChatMessage id="1"
block to include that header slot example.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@playgrounds/nuxt/app/pages/components/chat-message.vue`:
- Around line 19-21: Add a small example of the new header slot to the
playground by updating the UChatMessage usage inside the Matrix v-slot block:
keep the existing props and parts but add a header slot (e.g., a <template
`#header`> or v-slot:header on UChatMessage) that renders simple header content
like a title, role label or timestamp so users can interactively see the new
header slot behavior alongside the existing color demo; modify the Matrix
v-slot="props" / UChatMessage id="1" block to include that header slot example.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 4421a0cd-6c48-440d-b519-6e11e0c25535

📥 Commits

Reviewing files that changed from the base of the PR and between 28cc3f1 and d038310.

📒 Files selected for processing (1)

• playgrounds/nuxt/app/pages/components/chat-message.vue

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@6407

commit: d038310