[docs-infra] Move Open in MUI Chat to Demo toolbar and adjust styles (#46579)

siriwatknp · web-flow · commit 082ce82e9e17 · 2025-07-22T10:41:34.000+07:00
diff --git a/docs/.env b/docs/.env
@@ -1,4 +1 @@
 FEEDBACK_URL=https://hgvi836wi8.execute-api.us-east-1.amazonaws.com
-
-# Enable this variable after we get enough feedbacks from X docs.
-# NEXT_PUBLIC_MUI_CHAT_API_BASE_URL=https://chat-backend.mui.com
diff --git a/docs/next.config.ts b/docs/next.config.ts
@@ -184,6 +184,8 @@ export default withDocsInfra({
     GITHUB_AUTH: process.env.GITHUB_AUTH
       ? `Basic ${Buffer.from(process.env.GITHUB_AUTH).toString('base64')}`
       : '',
+    MUI_CHAT_API_BASE_URL: 'https://chat-backend.mui.com',
+    MUI_CHAT_SCOPES: process.env.DEPLOY_ENV === 'production' ? '' : 'material-ui', // Use comma separated list of `productId` (see `_app.js`) to enable MUI Chat on demos
   },
   // Ensure CSS from the Data Grid packages is included in the build:
   // https://github.com/mui/mui-x/issues/17427#issuecomment-2813967605
diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
@@ -27,7 +27,6 @@ import stylingSolutionMapping from 'docs/src/modules/utils/stylingSolutionMappin
 import DemoToolbarRoot from 'docs/src/modules/components/DemoToolbarRoot';
 import { AdCarbonInline } from '@mui/docs/Ad';
 import DemoAiSuggestionHero from 'docs/src/modules/components/DemoAiSuggestionHero';
-import OpenMuiChat from 'docs/src/modules/components/OpenMuiChat';
 
 /**
  * Removes leading spaces (indentation) present in the `.tsx` previews
@@ -638,34 +637,6 @@ export default function Demo(props) {
                   )}
                 </TabPanel>
               ))}
-              {process.env.NEXT_PUBLIC_MUI_CHAT_API_BASE_URL && (
-                <Box
-                  sx={(theme) => ({
-                    position: 'relative',
-                    display: 'none',
-                    [theme.breakpoints.up('sm')]: { display: 'block' },
-                  })}
-                >
-                  {/* This extra box is to prevent hover styles of DemoEditor when mouse move from the corner to the chat button. */}
-                  <Box
-                    sx={{
-                      position: 'absolute',
-                      bottom: '0',
-                      right: '0',
-                      zIndex: 1,
-                      pr: '0.875rem',
-                      pb: '0.875rem',
-                    }}
-                  >
-                    <OpenMuiChat
-                      data-ga-event-category="mui-chat"
-                      data-ga-event-label={demo.gaLabel}
-                      data-ga-event-action="open-in-mui-chat"
-                      demoData={demoData}
-                    />
-                  </Box>
-                </Box>
-              )}
             </Collapse>
           </Tabs>
           {/* AI Suggestion Hero UI */}
diff --git a/docs/src/modules/components/DemoToolbar.js b/docs/src/modules/components/DemoToolbar.js
@@ -21,6 +21,7 @@ import { useRouter } from 'next/router';
 import { CODE_VARIANTS } from 'docs/src/modules/constants';
 import { useSetCodeVariant } from 'docs/src/modules/utils/codeVariant';
 import { useTranslate } from '@mui/docs/i18n';
+import OpenMuiChat from 'docs/src/modules/components/OpenMuiChat';
 import stylingSolutionMapping from 'docs/src/modules/utils/stylingSolutionMapping';
 import codeSandbox from '../sandbox/CodeSandbox';
 import stackBlitz from '../sandbox/StackBlitz';
@@ -437,6 +438,12 @@ export default function DemoToolbar(props) {
   return (
     <React.Fragment>
       <Root aria-label={t('demoToolbarLabel')} {...toolbarProps}>
+        <OpenMuiChat
+          data-ga-event-category="mui-chat"
+          data-ga-event-label={demo.gaLabel}
+          data-ga-event-action="open-in-mui-chat"
+          demoData={demoData}
+        />
         <Fade in={codeOpen}>
           <Box sx={{ display: 'flex' }}>
             {hasNonSystemDemos && (
diff --git a/docs/src/modules/components/OpenMuiChat.tsx b/docs/src/modules/components/OpenMuiChat.tsx
@@ -4,7 +4,7 @@ import Button, { ButtonProps } from '@mui/material/Button';
 import CircularProgress from '@mui/material/CircularProgress';
 import Snackbar from '@mui/material/Snackbar';
 import Alert from '@mui/material/Alert';
-import SvgMuiLogomark from 'docs/src/icons/SvgMuiLogomark';
+import PageContext from 'docs/src/modules/components/PageContext';
 import { createMuiChat } from '../sandbox/MuiChat';
 import { DemoData } from '../sandbox/types';
 
@@ -22,45 +22,48 @@ const rainbow = keyframes`
 `;
 
 const RainbowButton = styled(Button)(({ theme }) => ({
-  '--color-1': '0 100% 63%',
-  '--color-2': '270 100% 63%',
-  '--color-3': '210 100% 63%',
-  '--color-4': '195 100% 63%',
-  '--color-5': '90 100% 63%',
+  '--color-1': '0 100% 50%',
+  '--color-2': '270 100% 50%',
+  '--color-3': '210 100% 50%',
+  '--color-4': '195 100% 50%',
+  '--color-5': '90 100% 50%',
   position: 'relative',
   display: 'inline-flex',
   height: 26,
   padding: '7px 8px 8px 8px', // 7px for optical alignment
   flexShrink: 0,
-  borderRadius: '6px',
+  borderRadius: 999,
   border: '1px solid transparent',
-  borderBottomWidth: '3px',
-  borderBottomColor: 'transparent',
-  boxShadow: '0 -1px 4px 0px rgba(255, 255, 255, 0.32)',
+  borderBottomWidth: '2.5px',
+  borderColor: alpha(theme.palette.grey[200], 0.8),
   '&.MuiButton-loading': {
-    boxShadow: '0 -1px 4px 0px rgba(255, 255, 255, 0.32)',
+    '& > svg': {
+      transform: 'translateX(36px)',
+    },
   },
-  color: '#fff',
   fontSize: theme.typography.pxToRem(13),
   fontWeight: theme.typography.fontWeightMedium,
   backgroundSize: '200%',
   backgroundClip: 'padding-box, border-box, border-box',
   backgroundOrigin: 'border-box',
   animation: `${rainbow} 2s linear infinite`,
-  '--bg-color-raw': '16, 18, 20',
+  '--bg-color-raw': '255,255,255',
   '--bg-color': 'rgb(var(--bg-color-raw))',
-  backgroundImage: `linear-gradient(var(--bg-color), var(--bg-color)), linear-gradient(var(--bg-color) 50%, rgba(var(--bg-color-raw), 0.6) 80%, rgba(var(--bg-color-raw), 0)), linear-gradient(90deg, hsl(var(--color-1)), hsl(var(--color-5)), hsl(var(--color-3)), hsl(var(--color-4)), hsl(var(--color-2)))`,
+  backgroundImage: `linear-gradient(var(--bg-color), var(--bg-color)), linear-gradient(var(--bg-color) 50%, rgba(var(--bg-color-raw)) 80%, rgba(var(--bg-color-raw), 0)), linear-gradient(90deg, hsl(var(--color-1)), hsl(var(--color-5)), hsl(var(--color-3)), hsl(var(--color-4)), hsl(var(--color-2)))`,
+  '&:hover': {
+    '--bg-color-raw': '235,245,255',
+  },
   ...theme.applyDarkStyles({
+    '--bg-color-raw': '16, 18, 20',
     borderColor: alpha(theme.palette.primary[300], 0.2),
+    '&:hover': {
+      '--bg-color-raw': '13, 38, 63',
+    },
   }),
-  '&:hover': {
-    boxShadow: '0 -1px 4px 0px rgba(255, 255, 255, 0.56)',
-    animationPlayState: 'paused',
-  },
   '&::before': {
     content: '""',
     position: 'absolute',
-    bottom: '-20%',
+    bottom: '-25%',
     left: '50%',
     zIndex: 0,
     height: '20%',
@@ -69,23 +72,29 @@ const RainbowButton = styled(Button)(({ theme }) => ({
     animation: `${rainbow} 3s linear infinite`,
     background:
       'linear-gradient(90deg, hsl(var(--color-1)), hsl(var(--color-5)), hsl(var(--color-3)), hsl(var(--color-4)), hsl(var(--color-2)))',
-    filter: 'blur(0.8rem)',
+    filter: 'blur(1.2rem)',
+    ...theme.applyDarkStyles({
+      width: '90%',
+      filter: 'blur(0.5rem)',
+    }),
   },
   '& > svg': {
-    height: 12,
-    width: 12,
-    margin: '1px 4px 0 4px',
-  },
-  '& > svg > path': {
+    height: 18,
+    width: 18,
+    margin: '0 4px 0 0',
+    stroke: (theme.vars || theme).palette.primary.main,
     fill: (theme.vars || theme).palette.primary.main,
+    transition: 'transform 0.4s',
   },
 }));
 
 const OpenInMUIChatButton = React.forwardRef<HTMLButtonElement, OpenInMUIChatButtonProps>(
   function OpenInMUIChatButton({ demoData, ...props }, ref) {
+    const { productId } = React.useContext(PageContext);
     const [loading, setLoading] = React.useState(false);
     const [error, setError] = React.useState<Error | null>(null);
-    const baseUrl = process.env.NEXT_PUBLIC_MUI_CHAT_API_BASE_URL;
+    const baseUrl = process.env.MUI_CHAT_API_BASE_URL;
+    const scopes = process.env.MUI_CHAT_SCOPES;
 
     const handleClick = async () => {
       setLoading(true);
@@ -101,7 +110,7 @@ const OpenInMUIChatButton = React.forwardRef<HTMLButtonElement, OpenInMUIChatBut
     };
 
     // If the base URL is not set, we can't render the button
-    if (!baseUrl) {
+    if (!baseUrl || !scopes || !scopes.split(',').includes(productId)) {
       return null;
     }
 
@@ -116,7 +125,20 @@ const OpenInMUIChatButton = React.forwardRef<HTMLButtonElement, OpenInMUIChatBut
           onClick={handleClick}
           {...props}
         >
-          Edit in <SvgMuiLogomark /> Chat
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth="1.5"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z"
+            />
+          </svg>{' '}
+          Edit in Chat
         </RainbowButton>
         <Snackbar
           open={!!error}
diff --git a/docs/src/modules/sandbox/MuiChat.ts b/docs/src/modules/sandbox/MuiChat.ts
@@ -27,7 +27,7 @@ export function createMuiChat(demoData: DemoData) {
     description,
     dependencies,
     openSandbox: async () => {
-      const baseUrl = process.env.NEXT_PUBLIC_MUI_CHAT_API_BASE_URL;
+      const baseUrl = process.env.MUI_CHAT_API_BASE_URL;
 
       if (!baseUrl) {
         throw new Error(
