[x-chat] Material message surfaces: slots API, error surface, and hardened content rendering

docs/data/chat/behavior/error-handling/error-handling.md

@@ -3,7 +3,7 @@ productId: x-chat
 title: Error Handling
 packageName: '@mui/x-chat'
 githubLabel: 'scope: chat'
-components: ChatBox, MessageError
+components: ChatBox, ChatMessageError, MessageError
 ---
 
 # Chat - Error Handling

docs/data/chatApiPages.ts

@@ -93,6 +93,10 @@ const chatApiPages: MuiPage[] = [
     pathname: '/x/api/chat/chat-message-content',
     title: 'ChatMessageContent',
   },
+  {
+    pathname: '/x/api/chat/chat-message-error',
+    title: 'ChatMessageError',
+  },
   {
     pathname: '/x/api/chat/chat-message-group',
     title: 'ChatMessageGroup',

docs/pages/x/api/chat/chat-date-divider.json

@@ -84,6 +84,12 @@
       "description": "Styles applied to the message meta element.",
       "isGlobal": false
     },
+    {
+      "key": "noAvatar",
+      "className": "MuiChatDateDivider-noAvatar",
+      "description": "Applied when the avatar slot is hidden (`slots.avatar: null`) so the grid drops the avatar track.",
+      "isGlobal": false
+    },
     {
       "key": "roleAssistant",
       "className": "MuiChatDateDivider-roleAssistant",

docs/pages/x/api/chat/chat-layout.json

@@ -1,10 +1,7 @@
 {
   "props": {},
   "name": "ChatLayout",
-  "imports": [
-    "import { ChatLayout } from '@mui/x-chat/headless';",
-    "import { ChatLayout } from '@mui/x-chat/headless';"
-  ],
+  "imports": ["import { ChatLayout } from '@mui/x-chat/headless';"],
   "slots": [
     { "name": "root", "description": "", "class": null },
     { "name": "conversationsPane", "description": "", "class": null },

docs/pages/x/api/chat/chat-message-actions.json

@@ -84,6 +84,12 @@
       "description": "Styles applied to the message meta element.",
       "isGlobal": false
     },
+    {
+      "key": "noAvatar",
+      "className": "MuiChatMessageActions-noAvatar",
+      "description": "Applied when the avatar slot is hidden (`slots.avatar: null`) so the grid drops the avatar track.",
+      "isGlobal": false
+    },
     {
       "key": "roleAssistant",
       "className": "MuiChatMessageActions-roleAssistant",

docs/pages/x/api/chat/chat-message-author-label.json

@@ -84,6 +84,12 @@
       "description": "Styles applied to the message meta element.",
       "isGlobal": false
     },
+    {
+      "key": "noAvatar",
+      "className": "MuiChatMessageAuthorLabel-noAvatar",
+      "description": "Applied when the avatar slot is hidden (`slots.avatar: null`) so the grid drops the avatar track.",
+      "isGlobal": false
+    },
     {
       "key": "roleAssistant",
       "className": "MuiChatMessageAuthorLabel-roleAssistant",

docs/pages/x/api/chat/chat-message-avatar.json

@@ -84,6 +84,12 @@
       "description": "Styles applied to the message meta element.",
       "isGlobal": false
     },
+    {
+      "key": "noAvatar",
+      "className": "MuiChatMessageAvatar-noAvatar",
+      "description": "Applied when the avatar slot is hidden (`slots.avatar: null`) so the grid drops the avatar track.",
+      "isGlobal": false
+    },
     {
       "key": "roleAssistant",
       "className": "MuiChatMessageAvatar-roleAssistant",

docs/pages/x/api/chat/chat-message-content.json

@@ -92,6 +92,12 @@
       "description": "Styles applied to the message meta element.",
       "isGlobal": false
     },
+    {
+      "key": "noAvatar",
+      "className": "MuiChatMessageContent-noAvatar",
+      "description": "Applied when the avatar slot is hidden (`slots.avatar: null`) so the grid drops the avatar track.",
+      "isGlobal": false
+    },
     {
       "key": "roleAssistant",
       "className": "MuiChatMessageContent-roleAssistant",

docs/pages/x/api/chat/chat-message-error.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { ApiPage } from '@mui/internal-core-docs/ApiPage';
+import { mapApiPageTranslations } from '@mui/internal-core-docs/mapApiPageTranslations';
+import jsonPageContent from './chat-message-error.json';
+
+export default function Page(props) {
+  const { descriptions } = props;
+  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
+}
+
+export async function getStaticProps() {
+  const req = require.context(
+    'docs/translations/api-docs/chat/chat-message-error',
+    false,
+    /\.\/chat-message-error.*\.json$/,
+  );
+  const descriptions = mapApiPageTranslations(req);
+
+  return { props: { descriptions } };
+}

docs/pages/x/api/chat/chat-message-error.json

@@ -0,0 +1,35 @@
+{
+  "props": {},
+  "name": "ChatMessageError",
+  "imports": [
+    "import { ChatMessageError } from '@mui/x-chat/ChatMessageError';",
+    "import { ChatMessageError } from '@mui/x-chat';"
+  ],
+  "classes": [
+    {
+      "key": "message",
+      "className": "MuiChatMessageError-message",
+      "description": "Styles applied to the message text element.",
+      "isGlobal": false
+    },
+    {
+      "key": "retryButton",
+      "className": "MuiChatMessageError-retryButton",
+      "description": "Styles applied to the retry button.",
+      "isGlobal": false
+    },
+    {
+      "key": "root",
+      "className": "MuiChatMessageError-root",
+      "description": "Styles applied to the root element.",
+      "isGlobal": false
+    }
+  ],
+  "spread": true,
+  "themeDefaultProps": null,
+  "muiName": "MuiChatMessageError",
+  "filename": "/packages/x-chat/src/ChatMessageError/ChatMessageError.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/x/react-chat/behavior/error-handling/\">Chat - Error Handling</a></li></ul>",
+  "cssComponent": false
+}

docs/pages/x/api/chat/chat-message-group.json

@@ -89,6 +89,12 @@
       "description": "Styles applied to the message meta element.",
       "isGlobal": false
     },
+    {
+      "key": "noAvatar",
+      "className": "MuiChatMessageGroup-noAvatar",
+      "description": "Applied when the avatar slot is hidden (`slots.avatar: null`) so the grid drops the avatar track.",
+      "isGlobal": false
+    },
     {
       "key": "roleAssistant",
       "className": "MuiChatMessageGroup-roleAssistant",

docs/pages/x/api/chat/chat-message-list.json

@@ -3,7 +3,8 @@
     "autoScroll": {
       "type": { "name": "union", "description": "{ buffer?: number }<br>&#124;&nbsp;bool" },
       "default": "true"
-    }
+    },
+    "renderItem": { "type": { "name": "func" } }
   },
   "name": "ChatMessageList",
   "imports": [

docs/pages/x/api/chat/chat-message-meta.json

@@ -84,6 +84,12 @@
       "description": "Styles applied to the message meta element.",
       "isGlobal": false
     },
+    {
+      "key": "noAvatar",
+      "className": "MuiChatMessageMeta-noAvatar",
+      "description": "Applied when the avatar slot is hidden (`slots.avatar: null`) so the grid drops the avatar track.",
+      "isGlobal": false
+    },
     {
       "key": "roleAssistant",
       "className": "MuiChatMessageMeta-roleAssistant",

docs/pages/x/api/chat/chat-root.json

@@ -1,10 +1,7 @@
 {
   "props": {},
   "name": "ChatRoot",
-  "imports": [
-    "import { ChatRoot } from '@mui/x-chat/headless';",
-    "import { ChatRoot } from '@mui/x-chat/headless';"
-  ],
+  "imports": ["import { ChatRoot } from '@mui/x-chat/headless';"],
   "slots": [{ "name": "root", "description": "", "class": null }],
   "classes": [],
   "spread": true,

docs/pages/x/api/chat/composer-attach-button.json

@@ -1,10 +1,7 @@
 {
   "props": {},
   "name": "ComposerAttachButton",
-  "imports": [
-    "import { ComposerAttachButton } from '@mui/x-chat/headless';",
-    "import { ComposerAttachButton } from '@mui/x-chat/headless';"
-  ],
+  "imports": ["import { ComposerAttachButton } from '@mui/x-chat/headless';"],
   "slots": [
     { "name": "attachButton", "description": "", "class": null },
     { "name": "attachInput", "description": "", "class": null }

docs/pages/x/api/chat/composer-attachment-list.json

@@ -1,10 +1,7 @@
 {
   "props": {},
   "name": "ComposerAttachmentList",
-  "imports": [
-    "import { ComposerAttachmentList } from '@mui/x-chat/headless';",
-    "import { ComposerAttachmentList } from '@mui/x-chat/headless';"
-  ],
+  "imports": ["import { ComposerAttachmentList } from '@mui/x-chat/headless';"],
   "slots": [{ "name": "attachmentList", "description": "", "class": null }],
   "classes": [],
   "muiName": "MuiComposerAttachmentList",

docs/pages/x/api/chat/composer-helper-text.json

@@ -1,10 +1,7 @@
 {
   "props": {},
   "name": "ComposerHelperText",
-  "imports": [
-    "import { ComposerHelperText } from '@mui/x-chat/headless';",
-    "import { ComposerHelperText } from '@mui/x-chat/headless';"
-  ],
+  "imports": ["import { ComposerHelperText } from '@mui/x-chat/headless';"],
   "slots": [{ "name": "helperText", "description": "", "class": null }],
   "classes": [],
   "muiName": "MuiComposerHelperText",

docs/pages/x/api/chat/composer-label.json

@@ -1,10 +1,7 @@
 {
   "props": {},
   "name": "ComposerLabel",
-  "imports": [
-    "import { ComposerLabel } from '@mui/x-chat/headless';",
-    "import { ComposerLabel } from '@mui/x-chat/headless';"
-  ],
+  "imports": ["import { ComposerLabel } from '@mui/x-chat/headless';"],
   "slots": [{ "name": "label", "description": "", "class": null }],
   "classes": [],
   "muiName": "MuiComposerLabel",

docs/pages/x/api/chat/composer-root.json

@@ -1,10 +1,7 @@
 {
   "props": {},
   "name": "ComposerRoot",
-  "imports": [
-    "import { ComposerRoot } from '@mui/x-chat/headless';",
-    "import { ComposerRoot } from '@mui/x-chat/headless';"
-  ],
+  "imports": ["import { ComposerRoot } from '@mui/x-chat/headless';"],
   "slots": [{ "name": "root", "description": "", "class": null }],
   "classes": [],
   "spread": true,

docs/pages/x/api/chat/composer-send-button.json

@@ -1,10 +1,7 @@
 {
   "props": {},
   "name": "ComposerSendButton",
-  "imports": [
-    "import { ComposerSendButton } from '@mui/x-chat/headless';",
-    "import { ComposerSendButton } from '@mui/x-chat/headless';"
-  ],
+  "imports": ["import { ComposerSendButton } from '@mui/x-chat/headless';"],
   "slots": [{ "name": "sendButton", "description": "", "class": null }],
   "classes": [],
   "muiName": "MuiComposerSendButton",

docs/pages/x/api/chat/composer-text-area.json

@@ -1,10 +1,7 @@
 {
   "props": {},
   "name": "ComposerTextArea",
-  "imports": [
-    "import { ComposerTextArea } from '@mui/x-chat/headless';",
-    "import { ComposerTextArea } from '@mui/x-chat/headless';"
-  ],
+  "imports": ["import { ComposerTextArea } from '@mui/x-chat/headless';"],
   "slots": [{ "name": "input", "description": "", "class": null }],
   "classes": [],
   "muiName": "MuiComposerTextArea",

docs/pages/x/api/chat/composer-toolbar.json

@@ -1,10 +1,7 @@
 {
   "props": {},
   "name": "ComposerToolbar",
-  "imports": [
-    "import { ComposerToolbar } from '@mui/x-chat/headless';",
-    "import { ComposerToolbar } from '@mui/x-chat/headless';"
-  ],
+  "imports": ["import { ComposerToolbar } from '@mui/x-chat/headless';"],
   "slots": [{ "name": "toolbar", "description": "", "class": null }],
   "classes": [],
   "muiName": "MuiComposerToolbar",

docs/pages/x/api/chat/conversation-header-actions.json

@@ -1,10 +1,7 @@
 {
   "props": {},
   "name": "ConversationHeaderActions",
-  "imports": [
-    "import { ConversationHeaderActions } from '@mui/x-chat/headless';",
-    "import { ConversationHeaderActions } from '@mui/x-chat/headless';"
-  ],
+  "imports": ["import { ConversationHeaderActions } from '@mui/x-chat/headless';"],
   "slots": [{ "name": "actions", "description": "", "class": null }],
   "classes": [],
   "muiName": "MuiConversationHeaderActions",

docs/pages/x/api/chat/conversation-header.json

@@ -1,10 +1,7 @@
 {
   "props": {},
   "name": "ConversationHeader",
-  "imports": [
-    "import { ConversationHeader } from '@mui/x-chat/headless';",
-    "import { ConversationHeader } from '@mui/x-chat/headless';"
-  ],
+  "imports": ["import { ConversationHeader } from '@mui/x-chat/headless';"],
   "slots": [{ "name": "header", "description": "", "class": null }],
   "classes": [],
   "muiName": "MuiConversationHeader",

docs/pages/x/api/chat/conversation-list-item-avatar.json

@@ -1,10 +1,7 @@
 {
   "props": {},
   "name": "ConversationListItemAvatar",
-  "imports": [
-    "import { ConversationListItemAvatar } from '@mui/x-chat/headless';",
-    "import { ConversationListItemAvatar } from '@mui/x-chat/headless';"
-  ],
+  "imports": ["import { ConversationListItemAvatar } from '@mui/x-chat/headless';"],
   "slots": [
     { "name": "root", "description": "", "class": null },
     { "name": "image", "description": "", "class": null }

docs/pages/x/api/chat/conversation-list-item.json

@@ -1,10 +1,7 @@
 {
   "props": {},
   "name": "ConversationListItem",
-  "imports": [
-    "import { ConversationListItem } from '@mui/x-chat/headless';",
-    "import { ConversationListItem } from '@mui/x-chat/headless';"
-  ],
+  "imports": ["import { ConversationListItem } from '@mui/x-chat/headless';"],
   "slots": [{ "name": "root", "description": "", "class": null }],
   "classes": [],
   "muiName": "MuiConversationListItem",

docs/pages/x/api/chat/conversation-list-preview.json

@@ -1,10 +1,7 @@
 {
   "props": {},
   "name": "ConversationListPreview",
-  "imports": [
-    "import { ConversationListPreview } from '@mui/x-chat/headless';",
-    "import { ConversationListPreview } from '@mui/x-chat/headless';"
-  ],
+  "imports": ["import { ConversationListPreview } from '@mui/x-chat/headless';"],
   "slots": [{ "name": "root", "description": "", "class": null }],
   "classes": [],
   "muiName": "MuiConversationListPreview",

docs/pages/x/api/chat/conversation-list-root.json

@@ -1,10 +1,7 @@
 {
   "props": {},
   "name": "ConversationListRoot",
-  "imports": [
-    "import { ConversationListRoot } from '@mui/x-chat/headless';",
-    "import { ConversationListRoot } from '@mui/x-chat/headless';"
-  ],
+  "imports": ["import { ConversationListRoot } from '@mui/x-chat/headless';"],
   "slots": [
     { "name": "root", "description": "", "class": null },
     { "name": "scroller", "description": "", "class": null },

docs/pages/x/api/chat/conversation-list-timestamp.json

@@ -1,10 +1,7 @@
 {
   "props": {},
   "name": "ConversationListTimestamp",
-  "imports": [
-    "import { ConversationListTimestamp } from '@mui/x-chat/headless';",
-    "import { ConversationListTimestamp } from '@mui/x-chat/headless';"
-  ],
+  "imports": ["import { ConversationListTimestamp } from '@mui/x-chat/headless';"],
   "slots": [{ "name": "root", "description": "", "class": null }],
   "classes": [],
   "muiName": "MuiConversationListTimestamp",

docs/pages/x/api/chat/conversation-list-title.json

@@ -1,10 +1,7 @@
 {
   "props": {},
   "name": "ConversationListTitle",
-  "imports": [
-    "import { ConversationListTitle } from '@mui/x-chat/headless';",
-    "import { ConversationListTitle } from '@mui/x-chat/headless';"
-  ],
+  "imports": ["import { ConversationListTitle } from '@mui/x-chat/headless';"],
   "slots": [{ "name": "root", "description": "", "class": null }],
   "classes": [],
   "muiName": "MuiConversationListTitle",