[x-chat] Material message surfaces: slots API, error surface, and hardened content rendering#22670
Open
Copilot wants to merge 51 commits into
Open
[x-chat] Material message surfaces: slots API, error surface, and hardened content rendering#22670Copilot wants to merge 51 commits into
Copilot wants to merge 51 commits into
Conversation
Two built-in adapters that ship with @mui/x-chat-headless: a simple echo adapter for examples and an AI SDK adapter that bridges Vercel AI SDK UIMessage streams into ChatMessageChunk events. Wire both through the headless core barrel so they can be imported from '@mui/x-chat-headless' and '@mui/x-chat-headless/core'.
Signed-off-by: Vadym Raksha <hello@raksha.bio>
…untime-model # Conflicts: # packages/x-chat-headless/src/adapters/createAiSdkAdapter.test.ts # packages/x-chat-headless/src/adapters/createAiSdkAdapter.ts
Member
|
@codex review hard, find any suspicious parts or bugs, launch multiple subagents to discover each part independently |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 4258a050b5
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Contributor
There was a problem hiding this comment.
Pull request overview
This PR strengthens and modernizes the Material surface layer of @mui/x-chat on top of the headless runtime, focusing on a slots-based composition API, a dedicated message error surface, and improved/hardened content rendering, while also cleaning up public API docs generation.
Changes:
- Adds
ChatMessageError(component + classes + theme augmentation) and wires it into message rendering. - Introduces a shared default per-row renderer (
DefaultMessageItem) and updatesChatMessageListto support default rendering whenrenderItemis omitted, with row-level slot forwarding. - Improves docs/API generation inputs/outputs (deduped imports; excludes internal implementation files from public docs).
Reviewed changes
Copilot reviewed 94 out of 94 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| scripts/x-chat.exports.json | Exposes ChatMessageError and utility-class exports. |
| scripts/buildApiDocs/chatSettings/index.ts | Excludes internal DefaultMessageItem from API docs. |
| scripts/buildApiDocs/chatSettings/getComponentInfo.ts | Dedupes generated import strings. |
| packages/x-chat/src/themeAugmentation/props.ts | Adds theme defaultProps typing for MuiChatMessageError. |
| packages/x-chat/src/themeAugmentation/overrides.ts | Adds overrides typing for MuiChatMessageError. |
| packages/x-chat/src/themeAugmentation/components.ts | Adds components.MuiChatMessageError entry. |
| packages/x-chat/src/internals/useCopyToClipboard.ts | Adds shared clipboard-copy hook for UI surfaces. |
| packages/x-chat/src/index.ts | Exports ChatMessageError from package root. |
| packages/x-chat/src/ChatMessageSources/ChatMessageSources.tsx | Adds sx prop support. |
| packages/x-chat/src/ChatMessageSkeleton/ChatMessageSkeleton.tsx | Adds sx prop support. |
| packages/x-chat/src/ChatMessageList/DefaultMessageItem.tsx | Adds shared default row renderer (internal). |
| packages/x-chat/src/ChatMessageList/ChatMessageList.tsx | Adds default renderItem, slots partitioning, row slots. |
| packages/x-chat/src/ChatMessageList/ChatMessageList.test.tsx | Tests default row rendering + slot override behavior. |
| packages/x-chat/src/ChatMessageError/index.ts | Public barrel for ChatMessageError. |
| packages/x-chat/src/ChatMessageError/chatMessageErrorClasses.ts | Utility classes for ChatMessageError. |
| packages/x-chat/src/ChatMessageError/ChatMessageError.tsx | Implements Material error card + retry button. |
| packages/x-chat/src/ChatMessageError/ChatMessageError.test.tsx | Tests rendering, retry, disabled state, classes. |
| packages/x-chat/src/ChatMessage/index.ts | Re-exports ChatMessageError from ChatMessage barrel. |
| packages/x-chat/src/ChatMessage/ChatMessageMeta.tsx | Uses isOwnMessage for alignment logic. |
| packages/x-chat/src/ChatMessage/ChatMessageInlineMeta.tsx | Uses isOwnMessage for contrast/alignment logic. |
| packages/x-chat/src/ChatMessage/ChatMessageGroup.tsx | Adds group/message slots API and avatar-collapsing behavior. |
| packages/x-chat/src/ChatMessage/ChatMessageGroup.test.tsx | Tests authorName slot override/hide behavior. |
| packages/x-chat/src/ChatMessage/ChatMessageContent.tsx | Tool/reasoning rendering refresh + copy affordances. |
| packages/x-chat/src/ChatMessage/ChatMessageContent.test.tsx | Updates/extends tests for tool UI changes. |
| packages/x-chat/src/ChatMessage/chatMessageClasses.ts | Adds noAvatar utility class. |
| packages/x-chat/src/ChatMessage/ChatMessageActions.tsx | Uses isOwnMessage for alignment. |
| packages/x-chat/src/ChatMessage/ChatMessage.tsx | Slots-driven message composition + error area. |
| packages/x-chat/src/ChatMessage/ChatMessage.test.tsx | Updates slotProps naming test + ownership semantics test. |
| packages/x-chat/src/ChatMessage/ChatDateDivider.tsx | Adds sx prop support. |
| packages/x-chat/src/ChatConversationList/ChatConversationList.tsx | Slot typing improvements + layout/container-query tweaks. |
| packages/x-chat/src/ChatComposer/ChatComposerTextArea.test.tsx | Updates slotProps key naming in tests. |
| packages/x-chat/src/ChatComposer/ChatComposerSendButton.test.tsx | Updates slotProps key naming in tests. |
| packages/x-chat/src/ChatComposer/ChatComposerAttachmentList.tsx | Uses useChatComposer for store-driven rendering. |
| packages/x-chat/src/ChatComposer/ChatComposerAttachButton.test.tsx | Updates slotProps key naming in tests. |
| packages/x-chat/src/ChatComposer/ChatComposer.tsx | Removes zIndex from composer root styling. |
| packages/x-chat/src/ChatComposer/ChatComposer.test.tsx | Updates slotProps key naming in tests. |
| packages/x-chat/src/ChatCodeBlock/ChatCodeBlock.tsx | Adds sx prop + reuses clipboard hook. |
| packages/x-chat/src/ChatBox/ChatBox.types.ts | Adds message/messageList slot-family typing. |
| docs/translations/api-docs/chat/chat-message-meta/chat-message-meta.json | Documents noAvatar class. |
| docs/translations/api-docs/chat/chat-message-list/chat-message-list.json | Documents renderItem prop. |
| docs/translations/api-docs/chat/chat-message-group/chat-message-group.json | Documents noAvatar class. |
| docs/translations/api-docs/chat/chat-message-error/chat-message-error.json | Adds translations for ChatMessageError API page. |
| docs/translations/api-docs/chat/chat-message-content/chat-message-content.json | Documents noAvatar class. |
| docs/translations/api-docs/chat/chat-message-avatar/chat-message-avatar.json | Documents noAvatar class. |
| docs/translations/api-docs/chat/chat-message-author-label/chat-message-author-label.json | Documents noAvatar class. |
| docs/translations/api-docs/chat/chat-message-actions/chat-message-actions.json | Documents noAvatar class. |
| docs/translations/api-docs/chat/chat-date-divider/chat-date-divider.json | Documents noAvatar class. |
| docs/pages/x/api/chat/unread-marker.json | Dedupes generated import list. |
| docs/pages/x/api/chat/typing-indicator.json | Dedupes generated import list. |
| docs/pages/x/api/chat/scroll-to-bottom-affordance.json | Dedupes generated import list. |
| docs/pages/x/api/chat/message-root.json | Dedupes generated import list. |
| docs/pages/x/api/chat/message-meta.json | Dedupes generated import list. |
| docs/pages/x/api/chat/message-list-root.json | Dedupes generated import list. |
| docs/pages/x/api/chat/message-list-date-divider.json | Dedupes generated import list. |
| docs/pages/x/api/chat/message-group.json | Dedupes generated import list. |
| docs/pages/x/api/chat/message-error.json | Dedupes generated import list. |
| docs/pages/x/api/chat/message-content.json | Dedupes generated import list. |
| docs/pages/x/api/chat/message-avatar.json | Dedupes generated import list. |
| docs/pages/x/api/chat/message-author-label.json | Dedupes generated import list. |
| docs/pages/x/api/chat/message-actions.json | Dedupes generated import list. |
| docs/pages/x/api/chat/conversation-title.json | Dedupes generated import list. |
| docs/pages/x/api/chat/conversation-subtitle.json | Dedupes generated import list. |
| docs/pages/x/api/chat/conversation-root.json | Dedupes generated import list. |
| docs/pages/x/api/chat/conversation-list-unread-badge.json | Dedupes generated import list. |
| docs/pages/x/api/chat/conversation-list-title.json | Dedupes generated import list. |
| docs/pages/x/api/chat/conversation-list-timestamp.json | Dedupes generated import list. |
| docs/pages/x/api/chat/conversation-list-root.json | Dedupes generated import list. |
| docs/pages/x/api/chat/conversation-list-preview.json | Dedupes generated import list. |
| docs/pages/x/api/chat/conversation-list-item.json | Dedupes generated import list. |
| docs/pages/x/api/chat/conversation-list-item-avatar.json | Dedupes generated import list. |
| docs/pages/x/api/chat/conversation-header.json | Dedupes generated import list. |
| docs/pages/x/api/chat/conversation-header-actions.json | Dedupes generated import list. |
| docs/pages/x/api/chat/composer-toolbar.json | Dedupes generated import list. |
| docs/pages/x/api/chat/composer-text-area.json | Dedupes generated import list. |
| docs/pages/x/api/chat/composer-send-button.json | Dedupes generated import list. |
| docs/pages/x/api/chat/composer-root.json | Dedupes generated import list. |
| docs/pages/x/api/chat/composer-label.json | Dedupes generated import list. |
| docs/pages/x/api/chat/composer-helper-text.json | Dedupes generated import list. |
| docs/pages/x/api/chat/composer-attachment-list.json | Dedupes generated import list. |
| docs/pages/x/api/chat/composer-attach-button.json | Dedupes generated import list. |
| docs/pages/x/api/chat/chat-root.json | Dedupes generated import list. |
| docs/pages/x/api/chat/chat-message-meta.json | Adds noAvatar class entry. |
| docs/pages/x/api/chat/chat-message-list.json | Adds renderItem prop entry. |
| docs/pages/x/api/chat/chat-message-group.json | Adds noAvatar class entry. |
| docs/pages/x/api/chat/chat-message-error.json | Adds generated API metadata for ChatMessageError. |
| docs/pages/x/api/chat/chat-message-error.js | Adds docs API page for ChatMessageError. |
| docs/pages/x/api/chat/chat-message-content.json | Adds noAvatar class entry. |
| docs/pages/x/api/chat/chat-message-avatar.json | Adds noAvatar class entry. |
| docs/pages/x/api/chat/chat-message-author-label.json | Adds noAvatar class entry. |
| docs/pages/x/api/chat/chat-message-actions.json | Adds noAvatar class entry. |
| docs/pages/x/api/chat/chat-layout.json | Dedupes generated import list. |
| docs/pages/x/api/chat/chat-date-divider.json | Adds noAvatar class entry. |
| docs/data/chatApiPages.ts | Registers ChatMessageError API page route. |
| docs/data/chat/behavior/error-handling/error-handling.md | Adds ChatMessageError to documented components list. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
💡 Codex Review
mui-x/packages/x-chat/src/ChatMessage/ChatMessageContent.tsx
Lines 1157 to 1159 in ed6de9a
Merge Material part slots with user overrides
If a consumer customizes only one part slot, e.g. partProps={{ tool: { slots: { sectionSummary: Custom } } }}, the spread at the end replaces the whole slots object and drops all Material defaults from toolPartSlots. That leaves the other tool subparts rendered with the headless defaults, so a partial slot override unexpectedly strips the Material error/actions/header styling for that part. Merge nested slots objects ({ ...toolPartSlots, ...userPartProps?.tool?.slots }, and similarly for the other part types) instead of letting a partial override replace the full map.
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
hasdfa
added
the
type: enhancement
Member
|
Re: the Codex review suggestion "Merge Material part slots with user overrides" ( |
- Use an anonymous container query so the conversation list hides on narrow layouts - Forward slots.message.root into ChatMessage instead of replacing the row - Thread index/items through the default renderer so grouping matches the rendered list - Sync the tool input section open state on input-available -> approval-requested - Honor slots.error/slotProps.error in the children composition path - Merge nested part slots so a partial partProps override keeps Material defaults
The render-phase state sync regressed test_unit_react_18; switch to a useEffect that mirrors ChatToolPartRoot's auto-open so the behavior is consistent across React versions.
The Material refactor dropped the --ChatBox-conversationListWidth token definition and changed the scroller to width:100%, leaving the desktop inline sidebar content-sized (and orphaning the var the Drawer relies on). Restore the 260px token on the list root and the scroller's var width so the sidebar keeps a stable default and the Drawer fallback is defined.
Member
|
@codex review |
|
Codex Review: Didn't find any major issues. Hooray! ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
If Codex has suggestions, it will comment; otherwise it will react with 👍. Codex can also answer questions or update the PR. Try commenting "@codex address that feedback". |
hasdfa
approved these changes
Jun 3, 2026
hasdfa
approved these changes
Jun 3, 2026
joserodolfofreitas
approved these changes
Jun 3, 2026
joserodolfofreitas
left a comment
joserodolfofreitas
left a comment
Member
There was a problem hiding this comment.
Interesting workflow with Copilit.
And thanks for the refinements.
LGTM.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Reopen of the #22481
Summary
This PR hardens and completes the Material message surface layer in
@mui/x-chatand aligns docs/API metadata with the new public surface.What changed (before → after)
1) Message rendering and slotting
ChatMessage,ChatMessageContent,ChatMessageGroup,ChatMessageList) with default message item extraction (DefaultMessageItem) and expanded slot wiring, making customization and future codemods safer.2) Error UI surface
MessageErroronly, and there was no dedicated MaterialChatMessageErrorAPI page/component surface.ChatMessageErrorMaterial surface (component, classes, tests, docs API metadata, translations), and updated error-handling docs to reference it explicitly.3) Code block/content hardening
ChatMessageContentandChatCodeBlockbehavior, including shared clipboard utility (useCopyToClipboard) and stronger test coverage for content rendering paths.4) Public exports and theme augmentation
scripts/x-chat.exports.json, packageindex.ts, and theme augmentation (components,props,overrides) so new/updated surfaces are discoverable and typed for consumers.5) API docs generation quality
scripts/buildApiDocs/chatSettings/*and docs JSON pages were updated so API docs match the intended public API and include newChatMessageErrormetadata.Scope of files
packages/x-chat/src/**(message, message list, message content, composer adjacents, conversation list, error surface)docs/pages/x/api/chat/**,docs/data/chat/**,docs/translations/api-docs/chat/**scripts/buildApiDocs/chatSettings/**,scripts/x-chat.exports.jsonWhy this is useful
Consumers now get a clearer and more complete Material message surface API (especially around error rendering and message composition), while docs and generated API metadata accurately reflect the public contract.