[chat] Add x-chat package family#21666
Conversation
Rename the core message entity types to ChatMessage and ChatMessagePart, and add open registry interfaces for message, conversation, and user metadata plus custom message parts, tool definitions, and data parts. Re-export the new type surface through @mui/x-chat/types and add a compile-time test that demonstrates the short-term declaration-merging path via @mui/x-chat-headless/types while consuming the public Chatbox namespace facade.
Implement the SRV-34 message part type system in x-chat-headless, including text, reasoning, file, source, data, step-start, tool, and dynamic-tool parts plus typed tool invocation state and approval models. Split augmentation registries into a dedicated type-registry module, keep registered tool and data keys strict once consumers augment those maps, and re-export the expanded surface through @mui/x-chat/types with public alias coverage and compile-time facade tests.
Add ChatMessageChunk union and ChatStreamEnvelope for the streaming protocol. Extract shared registry helpers (ChatToolInput, ChatToolOutput, ChatKnownToolName, etc.) into chat-type-helpers.ts so both message-part and stream-chunk types can reference them. Extend the x-chat type facade with sorted stream aliases and add type-level tests for stream types.
…handling, and chunk processors
hasdfa
added
type: new feature
- Export ChatOnToolCallPayload and ChatOnFinishPayload from the public barrel (were defined in chat-callbacks.ts but omitted from index.ts) - Add typingByConversation state to ChatInternalState and ChatStore, with a setTypingUser(conversationId, userId, isTyping) mutation that no-ops when the value is unchanged - Add chatSelectors.typingUserIds — memoized selector that derives the list of typing user IDs for a given conversation (defaults to the active conversation) - Implement the typing realtime event handler in useChatController (was an explicit no-op/return) - Expose typingUserIds via useChatStatus so consumers can render typing indicators without a separate hook - Tests: update useChatStatus toEqual assertions to include typingUserIds; add typing isolation test in selectorHooks.test.tsx; add end-to-end typing realtime event test in useChat.test.tsx
…mples - Stabilize messageIds/conversationIds references in controlled path to prevent unnecessary parent re-renders when only message bodies change - Wrap MessageRow in React.memo in selector-driven-thread example so only the changed row re-renders - Move render counter to useEffect to fix SSR hydration mismatch - Remove raw UUID leak from retry button label in streaming-lifecycle - Add online presence stat and "Sam goes offline" button in realtime example
|
By the way, you can check the |
That sounds good, I will definitely add it in next version |
Ensures demo links resolve to the correct version for @mui/x-chat and @mui/x-chat-headless, matching the pattern used by other packages.
Sure, I will definitely look into it, we may use it as default in this package later. I've just tried to go with existing MUI X approach there |
…t setup - docs/data/chatApiPages.ts: fix MuiPage import path (docs/src/MuiPage → @mui/internal-core-docs/MuiPage) - ChatProvider.test.tsx, useChatPartRenderer.test.tsx: mock console.error around toThrow() calls to satisfy vitest-fail-on-console in React 18 - ChatComposition.test.tsx: suppress act() warnings from ScrollArea in beforeEach/afterEach - useChat.test.tsx: mark Strict Mode duplicate-streams test as JSDOM-only - Indicators.test.tsx, MessageListRoot.test.tsx: add missing render() calls and autoScroll prop to browser tests - ChatScrollToBottomAffordance.test.tsx: use waitFor for async affordance checks, set height/autoScroll on MessageListRoot, add overflow messages
…sion - Fix chatApiPages.ts import to use docs/src/MuiPage (test_static) - Add synchronous isSending guard in sendMessageActions to prevent double sendMessage invocation in React 18 Strict Mode (test_unit_react_18) - Exclude ControlledStateHeadlessChat from regression tests due to sinon fake timer conflict with cancelAnimationFrame (test_regressions)
The chatSettings buildApiDocs template used 'docs/src/MuiPage' while all other settings (charts, grid, pickers, scheduler, treeView) use '@mui/internal-core-docs/MuiPage'. This caused test_static CI to fail because pnpm docs:api regenerated chatApiPages.ts with a different import than committed. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
|
@mnajdova I've implemented your suggestions and fixed tests related to x-chat package. The only lint CI fail is OOM. What should we do next? |
|
@mui/infra can you check the out of memory issue? How should we proceed? |
|
@hasdfa can you check the regression CI failing error? |
|
I checked the file changed outside of the chat* directories and those changes makes sense. I don't have enough time to review all the code from the chat packages and demos. If @joserodolfofreitas and @oliviertassinari are good with going forward I can subscribe to it. |
joserodolfofreitas
left a comment
joserodolfofreitas
left a comment
There was a problem hiding this comment.
Let's use the announcement momentum and publish this.
It's alpha zero, we'll have time to review it in the next few days.
Streaming chat demos (MinimalHeadlessChat, RealtimeHeadlessChat, etc.) use requestAnimationFrame internally for auto-scroll behavior. When those native frames were later cancelled via cancelAnimationFrame, Sinon's fake timer didn't recognise the native IDs and emitted a browser console warning, which the regression test harness treats as a test failure. Adding `shouldClearNativeTimers: true` tells Sinon to forward unknown cancelAnimationFrame calls to the native implementation instead of complaining, which is exactly what its own error message recommended.
Summary
This PR introduces the
@mui/x-chatpackage family — a headless-first, Material-styled chat UI component suite for MUI X.Architecture
Two-layer package design:
@mui/x-chat-headless@mui/x-chat<ChatBox />APIWhat's implemented
@mui/x-chat-headless— Core & primitivesState & runtime
ChatMessage,ChatConversation,ChatUser, and related contracts@mui/x-chat/types→Chatbox.*namespace for consumer extensionChatAdapterwithsendMessage,listMessages,subscribe, and related methodsChatStorewith controlled/uncontrolled state ownership layercreateSelector/createSelectorMemoizedfor derived stateprocessStreamwith dedup, sequencing, abort handling, and chunk mergingChatProvider— React context for store lifecycle managementChatVariant,ChatDensity,ChatVariantProvider,ChatDensityProvider,useChatVariant,useChatDensityHooks
useChat— runtime hook wiring adapter, store, and stream processoruseChatComposer— manages draft text, send action, pending state, and attachment listuseChatStore— escape hatch for direct store accessuseChatPartRenderer— pluggable part-level rendering systemuseChatOnToolCall— tool approval flow callbackuseChatStatus— chat lifecycle statususeMessage,useMessageIds,useConversation,useConversations— selector hooksHeadless UI primitives (unstyled, composition-first)
ChatRoot,ChatLayoutComposerRoot,ComposerTextArea,ComposerSendButton,ComposerAttachButton,ComposerAttachmentList,ComposerToolbar,ComposerHelperText,ComposerLabelMessageListRoot,MessageListDateDividerMessageGroupwith automatic grouping logic and pluggableGroupKeyFnMessageRoot,MessageContent,MessageAvatar,MessageAuthorLabel,MessageMeta,MessageActions,MessageActionsMenu, default part renderersConversationListRoot,ConversationListItemSuggestionsRoot,SuggestionItemTypingIndicator,ScrollToBottomAffordance,UnreadMarker@mui/x-chat— Styled Material componentsChatBox— one-liner API composing conversation + message list + composer into a single componentChatConversation—ChatConversationHeader,ChatConversationTitle,ChatConversationSubtitle,ChatConversationHeaderInfo,ChatConversationHeaderActionsChatConversationList— styled conversation sidebarChatComposer—ChatComposerTextArea,ChatComposerSendButton,ChatComposerAttachButton,ChatComposerAttachmentList,ChatComposerToolbar,ChatComposerHelperText,ChatComposerLabelChatMessage—ChatMessageAvatar,ChatMessageAuthorLabel,ChatMessageContent,ChatMessageMeta,ChatMessageInlineMeta,ChatMessageActionsChatMessageSkeleton— loading placeholderChatMessageList— scrollable message list with auto-scroll supportChatMessageSources— sources and citations displayChatCodeBlock— syntax-highlighted code block rendererChatSuggestions— prompt suggestion chipsChatConfirmation— tool approval confirmation UIChatIndicators— typing indicator and scroll affordancethemeAugmentation, component-levelstyleOverridesanddefaultPropsDocumentation
Fully structured doc site covering:
Test coverage
44 test files across both packages covering store, selectors, stream processor, adapter integration, hooks, and component rendering — including tool approval flow, render isolation, and hydration tests.
Key design decisions
messages[],conversations[]) with normalized internal state for performance<ChatBox />)compact/comfortable/spaciousdensity andbubble/plainvariant controls across all components