[docs][chat] Review and clean up react-chat docs demos & gallery; fix actions-bar layout#22993
Merged
Merged
Conversation
Low-risk clarity/accuracy fixes to /x/react-chat/all-components/ surfaced by a docs review of the page: - Reword the page description: "Browse every component shipped with the Chat package" overstated coverage (e.g. ChatStreamingIndicator ships in @mui/x-chat with an API page but has no card). Replace with an accurate, more informative summary of what the gallery is. - Deep-link the Messages cards to the section anchors the guide actually exposes, so distinct cards no longer all land on the same page top: ChatMessageGroup -> #message-groups, and the per-slot cards (avatar, author label, content, meta, inline meta) -> #message-slots. Only h2/h3 headings get anchor ids, so the slot cards point at the #message-slots section that documents them all rather than the individual h4 sub-anchors. - Trim the run-on States section description that re-listed the six cards rendered directly below it. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01HVqPTc6ZQJpVKc2H2MgSoS
Deploy previewBundle size
Check out the code infra dashboard for more information about this PR. |
Slim the all-components gallery from 36 cards to the 23 components worth choosing between, and regroup the sections. Gallery-only change: every component stays shipped and documented in its guide page, the sidebar nav, and the API reference. - Rename "Full surfaces" to "Chat surfaces" and move ChatConversationList and ChatConversationHeader into it beside ChatBox and ChatConversation. Drop the now-empty "Layout and navigation" section and its header sub-slot cards (ChatConversationHeaderInfo, ChatConversationTitle, ChatConversationSubtitle, ChatConversationHeaderActions). - Messages: drop the ChatMessageAvatar, ChatMessageAuthorLabel, ChatMessageInlineMeta (folded into the ChatMessageMeta card), and ChatMessageError cards; keep List, Group, Message, Content, Meta, Actions. - Composer: keep ChatComposer, ChatComposerToolbar, and ChatComposerAttachmentList; drop the Label, TextArea, AttachButton, SendButton, and HelperText cards. - Prune the now-unused thumbnail components and their imports. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01HVqPTc6ZQJpVKc2H2MgSoS
hasdfa
added
docs
The MUI.MuiBrandName vale rule (CircleCI test_lint / valelint) requires a non-breaking space within the "MUI X" brand name. The reworded page description used a regular space; replace it with U+00A0 to match the convention used across the docs. Verified locally: valelint reports 0 errors across all 428 markdown files, and eslint/stylelint/tsc stay clean. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01HVqPTc6ZQJpVKc2H2MgSoS
Low-risk, self-contained demo cleanups surfaced by a docs audit of the react-chat guide pages. Regenerated the paired .js for each demo. - ChatCodeBlockPlayground: remove the "demo only" rainbow highlighter (per-character coloring) that taught nothing beyond the tokens option, and fix the stale "default markdown block" card description (the demo renders a standalone, editable ChatCodeBlock). - LiveTitle: drop the channel/slaMinutes/escalated metadata fields that were never read and only type-checked via an unrelated demo's global ChatConversationMetadata augmentation; seed only memberCount. - LoadingSkeletonInList: guard the timeout effect so it only arms while loading, instead of re-scheduling a redundant timer when loading flips to false. - ChatMessageActionsPlayground: fix the copy-paste conversation title 'Parts' -> 'Actions'. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01HVqPTc6ZQJpVKc2H2MgSoS
The channel/slaMinutes/escalated fields are required on ChatConversationMetadata within the docs TS project (the type-augmentation example augments it globally), so LiveTitle's fixture must include them. Restore them; dropping them broke `tsc` (TS2739). Making them optional belongs in the type-augmentation demo, not here. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01HVqPTc6ZQJpVKc2H2MgSoS
The playground demos cast every class-customization sx as `as any` (or `as object`), modelling a bad pattern for readers copying the code. The cast only existed because `toClassesSx` (and two demos) imported `Theme` from `@mui/material/styles`, whose `Theme` differs from the `@mui/system` `Theme` the x-chat components use for their `sx` prop — so `SxProps` had a mismatched type argument. Align the docs to the components: import `Theme`/`SxProps` from `@mui/system` in `useCustomizations` and `ChatBoxPlayground`, type the scroll playground's `buttonSx` prop as `SxProps<Theme>`, and drop all 21 casts across the 19 playground demos. Verified: tsc/eslint/prettier clean. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01HVqPTc6ZQJpVKc2H2MgSoS
LiveTitle seeded channel/slaMinutes/escalated on the conversation metadata even though it only reads memberCount. Those fields were only required because the type-augmentation example augments ChatConversationMetadata with them as required, and the docs compile every demo in one TS project. Make channel/slaMinutes/escalated optional in the type-augmentation demo (it already reads them with `?.`/`??`), then drop them from LiveTitle's fixture so the demo seeds only what it uses. Verified: tsc/eslint/prettier clean. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01HVqPTc6ZQJpVKc2H2MgSoS
… demos Ten chat demos declared local inline-SVG icon components (Send, Attach, Back, More, Search, Pin, Archive, Copy, ThumbsUp, Paperclip, Image) — the same icons re-drawn with slightly different paths across files, while sibling demos already use @mui/icons-material. Import the icons from @mui/icons-material (aliased to the same local names so usages are unchanged) and drop the hand-rolled definitions and a leftover SEND_ICON_PATH const. Verified: tsc/eslint/prettier clean. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01HVqPTc6ZQJpVKc2H2MgSoS
Two behavior playgrounds drove their demo behavior through anti-patterns a
junior would copy:
- ChatMessageErrorPlayground observed a retry click via a global
document CustomEvent bus + `.closest('.MuiChatMessageError-retryButton')`
className sniffing (with a comment admitting the real answer is
`useChat().retry()`). The built-in retry button already calls
runtime.actions.retry, so the DOM bus is removed entirely; the fixture is
a `role:'user'` message so the retryable toggle and retryButton class
customization actually apply, and the self-contradicting caption is fixed.
- ChatScrollToBottomAffordancePlayground appended a message by capturing the
adapter's onEvent in an `any`-typed ref and firing a fake `message-added`
realtime event. Replaced with the public `useChatStore().addMessage()`
(the same call the realtime handler makes internally), removing the `any`.
Verified: tsc/eslint/prettier clean; both pages render without runtime errors.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HVqPTc6ZQJpVKc2H2MgSoS
- LookAndFeelPlayground (212 -> 169 LOC): replace the hand-rolled swatch picker (Box component="button" with manual a11y), raw Slider + value guard, and props-panel chrome with the shared ChoiceControl/NumberControl and a MUI ToggleButtonGroup for the color swatches; name the remaining magic numbers. Same four controls and live ChatBox re-theming. - ToolCardExpansionPlayground (259 -> 232 LOC): remove the code-string vs defaultExpanded-closure duplication (a sync hazard) by deriving the shown snippet from the single source via a formatDefaultExpanded() helper; keep all five expansion presets and the tool lifecycle. Verified: tsc/eslint/prettier clean; both pages render (swatches render as circular colored toggles). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01HVqPTc6ZQJpVKc2H2MgSoS
The chat docs maintained two parallel fixture modules — one under `core/examples/shared` and a near-duplicate under `material/examples/shared` — which had drifted apart in signatures and fixtures. Demos imported from whichever happened to be nearest, so equivalent examples pulled different seed data and helper behaviour. Merge both into a single superset under `core/examples/shared` (`demoData.ts` + `demoUtils.ts`), unify the `demoUsers` set (each user now carries an avatar), reconcile the divergent helper signatures, and repoint every chat demo at the core module. Delete the now-dead `material/examples/shared` twins. No behavioural change to the rendered demos; this is a fixture/import consolidation only.
Two small consistency cleanups in the react-chat docs demos: - Date divider: `DateDividerThread` in the date-divider guide was a byte-for-byte twin of `DateDividerFormat` (same custom `formatDate`, same layout) already shared by the message-list and message-appearance pages. Delete the twin and point the date-divider guide at the canonical `DateDividerFormat` demo, so all three pages share one source. - Demo-frame heights: the fixed-height preview frames used 15 different arbitrary values (300–640). Collapse the small-preview outliers (300/320/340/380) to a single compact height (360) and the tall-ish outliers (480/520) to the common tall height (500). The mid scale (400/420/460) and the deliberately app-sized example showcases (560–640) are left unchanged. Coupled `previewMinHeight` props are kept in sync. No behavioural change to the demos; heights either grow (never clipping content) or shrink slightly on demos with vertical slack.
…ement The hover-revealed actions bar is documented as a small elevated chip anchored under the bubble, but two grid issues broke that: - As a grid item, the chip's `display: inline-flex` is blockified and the default `justify-self: stretch` stretched the paper chip (background + shadow) across the entire content column for assistant messages. Own messages were unaffected only because they already override to `end`. Anchor it with `justify-self: start` (matching ChatStreamingIndicatorRow). - The compact variant's grid templates never defined the `actions` area, so the bar was auto-placed on implicit lines outside the explicit grid (far right of the row). Add an `actions` row to all four compact templates (grouped/first-in-group × avatar/no-avatar). Adds browser-mode regression tests for both. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01HVqPTc6ZQJpVKc2H2MgSoS
github-actions
Bot
added
the
PR: out-of-date
Contributor
|
This pull request has conflicts, please resolve those before we can evaluate the pull request. |
hasdfa
changed the title
…ocs-review-k75wb2 # Conflicts: # docs/data/chat/ai-and-agents/tool-calling/ToolCardExpansionPlayground.tsx
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01HVqPTc6ZQJpVKc2H2MgSoS
github-actions
Bot
removed
the
PR: out-of-date
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.
Changelog
A docs pass over the react-chat documentation, plus one component fix the docs review surfaced. Three threads of work: curating the all-components gallery, an audit-driven cleanup of the component-page playgrounds and demos, and a
ChatMessageActionslayout fix in@mui/x-chat.Component fix:
ChatMessageActionslayoutThe hover-revealed actions bar is documented as a small elevated chip anchored under the bubble, but two CSS grid issues broke that (visible on
/x/react-chat/display/message-actions/):display: inline-flexis blockified and the defaultjustify-self: stretchstretched the paper chip (background + shadow) across the entire content column for assistant messages (825px in theChatBoxdemos). Own messages were unaffected only because they already override toend. Fixed by anchoring withjustify-self: start, matchingChatStreamingIndicatorRow.actionsarea, so the bar was auto-placed on implicit lines outside the explicit grid (far right of the row). Fixed by adding anactionsrow to all four compact templates (grouped/first-in-group × avatar/no-avatar).Both are covered by new browser-mode regression tests in
ChatMessage.test.tsx(verified to fail against the previous styles).Gallery
/x/react-chat/all-components/gallery from 36 cards down to a leaner set: dropped low-value presentational sub-slot cards (header sub-parts, message avatar/author-label/error, individual composer inputs), movedChatConversationListbeside the other surfaces, foldedChatConversationHeaderinto a renamed Chat surfaces section, and merged the two meta cards into one. Gallery cards only — no public API changed; every component remains exported, documented, and reachable from its guide/API page.Demo & playground cleanup
sxas anycasts from the chat playground demos by aligning the shareduseCustomizationshelper'sThemeimport with the components'@mui/systemorigin.documentCustomEventbus, anany-typedonEventshim) with the real public chat APIs (runtime.actions.retry,useChatStore().addMessage()).@mui/icons-materialequivalents.LiveTitlemetadata fields optional so trimming demo fixtures no longer breaks the type-augmentation example.Fixture & consistency consolidation
core/examples/shared(supersetdemoData+demoUtils, onedemoUsersset with avatars) and repointed every chat demo at it; deleted the near-duplicatematerial/examples/sharedtwin.DateDividerThreadtwin and pointed the date-divider guide at the canonicalDateDividerFormatdemo already shared by two other pages.360) and the tall-ish outliers to the common tall height (500); left the mid scale and the deliberately app-sized example showcases unchanged.Verification
pnpm docs:typescript(full docs typecheck) — clean.@mui/x-chattypecheck — clean.pnpm eslint/pnpm prettieron changed files — clean.x-chatunit suite (jsdom) — 287 passed; new layout tests run in browser mode (16/16 inChatMessage.test.tsx, and 2/16 fail without the fix)..jsdemo twins regenerated viascripts/formattedTSDemos.js.