feat(ChatMessage): add color prop and header slot#6407
feat(ChatMessage): add color prop and header slot#6407maximepvrt wants to merge 6 commits intonuxt:v4from
color prop and header slot#6407Conversation
📝 WalkthroughWalkthroughAdds a Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
playgrounds/nuxt/app/pages/components/chat-message.vue (1)
19-21: Consider adding required props to UChatMessage.The
UChatMessagecomponent requiresid,role, andpartsprops (or the deprecatedcontent). Whilecontentis provided, consider using the recommendedpartsformat with properidandrolefor 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
⛔ Files ignored due to path filters (4)
test/components/__snapshots__/ChatMessage-vue.spec.ts.snapis excluded by!**/*.snaptest/components/__snapshots__/ChatMessage.spec.ts.snapis excluded by!**/*.snaptest/components/__snapshots__/ChatMessages-vue.spec.ts.snapis excluded by!**/*.snaptest/components/__snapshots__/ChatMessages.spec.ts.snapis excluded by!**/*.snap
📒 Files selected for processing (6)
docs/content/docs/2.components/chat-message.mdplaygrounds/nuxt/app/composables/useNavigation.tsplaygrounds/nuxt/app/pages/components/chat-message.vuesrc/runtime/components/ChatMessage.vuesrc/theme/chat-message.tstest/components/ChatMessage.spec.ts
There was a problem hiding this comment.
🧹 Nitpick comments (1)
playgrounds/nuxt/app/pages/components/chat-message.vue (1)
19-21: Consider showcasing the newheaderslot in this playground.This page already demonstrates the new
colorbehavior well; adding a simple#headerexample 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
📒 Files selected for processing (1)
playgrounds/nuxt/app/pages/components/chat-message.vue
commit: |
| leadingIcon: 'shrink-0', | ||
| leadingAvatar: 'shrink-0', | ||
| leadingAvatarSize: '', | ||
| files: 'flex items-center gap-1.5 mb-1.5', |
There was a problem hiding this comment.
@maximepvrt I'm wondering if the mb-1.5 should not go on header slot now 🤔
There was a problem hiding this comment.
🧹 Nitpick comments (1)
test/components/ChatMessage.spec.ts (1)
31-31: ⚡ Quick win
headerslot test only checks render, not slot-prop forwarding.The new
with header slotcase verifies the slot renders without error, which is the minimum bar. The PR summary notes theheaderslot can receive slot props (e.g.,filesas a fallback). If the slot exposes any props, there is no assertion that confirms they are correctly forwarded — analogous to the existingforwards id, role, parts, metadata and contenttest for thecontentslot.Consider adding a dedicated test that captures the header slot's props and asserts their shape, matching whatever
ChatMessage.vueexposes.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@test/components/ChatMessage.spec.ts` at line 31, The 'with header slot' test only verifies render but doesn't assert that slot props are forwarded; update the ChatMessage.spec.ts case named 'with header slot' to provide the header slot as a function that captures the received slotProps into a variable and assert its shape/values (e.g., that it includes the expected files fallback or whatever props ChatMessage.vue exposes). Mirror the pattern used in the existing "forwards id, role, parts, metadata and content" test: render the header slot as a function, capture slotProps, and add assertions on keys/types/expected values to confirm proper forwarding from ChatMessage.vue.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@test/components/ChatMessage.spec.ts`:
- Line 31: The 'with header slot' test only verifies render but doesn't assert
that slot props are forwarded; update the ChatMessage.spec.ts case named 'with
header slot' to provide the header slot as a function that captures the received
slotProps into a variable and assert its shape/values (e.g., that it includes
the expected files fallback or whatever props ChatMessage.vue exposes). Mirror
the pattern used in the existing "forwards id, role, parts, metadata and
content" test: render the header slot as a function, capture slotProps, and add
assertions on keys/types/expected values to confirm proper forwarding from
ChatMessage.vue.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: d4140912-6446-447f-bbb4-0b287aca9348
📒 Files selected for processing (2)
src/runtime/components/ChatMessage.vuetest/components/ChatMessage.spec.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- src/runtime/components/ChatMessage.vue
2 participants
🔗 Linked issue
❓ Type of change
📚 Description
📝 Checklist