add mobile chatbot button. hide for other langs via css

mongodb · Nov 25, 2024 · 95249a4 · 95249a4
1 parent eab75ba
commit 95249a4
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 18 deletions.
diff --git a/src/components/ActionBar/ActionBar.js b/src/components/ActionBar/ActionBar.js
@@ -32,12 +32,15 @@ import {
   offlineStyling,
   overlineStyling,
   buttonStyling,
+  mobileButtonStyling,
 } from './styles';
+import { SparkleIcon } from './SparkIcon';
 
 const Chatbot = lazy(() => import('mongodb-chatbot-ui'));
-const LazyChatbot = lazy(() => import('./LazyChatbot'));
+const ChatbotModal = lazy(() => import('./ChatbotModal'));
 
 export const DEPRECATED_PROJECTS = ['atlas-app-services', 'datalake', 'realm'];
+const CHATBOT_TEXT = 'Ask MongoDB AI';
 
 const ActionBar = ({ template, slug, sidenav, ...props }) => {
   const url = isBrowser ? window.location.href : null;
@@ -55,7 +58,7 @@ const ActionBar = ({ template, slug, sidenav, ...props }) => {
 
   const { hideMobile, setHideMobile } = useContext(SidenavContext);
 
-  const onClick = () => {
+  const openChatbot = () => {
     reportAnalytics('Chatbot button clicked');
     setChatbotClicked((currVal) => !currVal);
   };
@@ -82,21 +85,20 @@ const ActionBar = ({ template, slug, sidenav, ...props }) => {
       {!isOfflineDocsBuild && (
         <ActionsBox>
           {template !== 'openapi' && <DarkModeDropdown />}
-          {locale === 'en-us' && (
-            <Button
-              className={cx(buttonStyling)}
-              leftGlyph={<Icon glyph="Sparkle" />}
-              aria-label={'Ask MongoDB AI'}
-              variant={'primaryOutline'}
-              onClick={onClick}
-            >
-              Ask Mongodb AI
-            </Button>
-          )}
+          <Button
+            className={cx(buttonStyling)}
+            leftGlyph={<Icon glyph="Sparkle" />}
+            aria-label={CHATBOT_TEXT}
+            variant={'primaryOutline'}
+            onClick={openChatbot}
+          >
+            {CHATBOT_TEXT}
+          </Button>
+          <SparkleIcon className={cx(mobileButtonStyling)} glyph={'Sparkle'} onClick={openChatbot} />
           {locale === 'en-us' && (
             <SuspenseHelper>
               <Chatbot serverBaseUrl={CHATBOT_SERVER_BASE_URL} darkMode={darkMode}>
-                <LazyChatbot chatbotClicked={chatbotClicked} setChatbotClicked={setChatbotClicked} />
+                <ChatbotModal chatbotClicked={chatbotClicked} setChatbotClicked={setChatbotClicked} />
               </Chatbot>
             </SuspenseHelper>
           )}

diff --git a/src/components/ActionBar/LazyChatbot.js → src/components/ActionBar/ChatbotModal.js b/src/components/ActionBar/LazyChatbot.js → src/components/ActionBar/ChatbotModal.js
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { useChatbotContext, ModalView, MongoDbLegalDisclosure, PoweredByAtlasVectorSearch } from 'mongodb-chatbot-ui';
 import { css } from '@leafygreen-ui/emotion';
 
-const LazyChatbot = ({ chatbotClicked, setChatbotClicked }) => {
+const ChatbotModal = ({ chatbotClicked, setChatbotClicked }) => {
   const { openChat } = useChatbotContext();
   useEffect(() => {
     if (chatbotClicked) {
@@ -31,4 +31,4 @@ const LazyChatbot = ({ chatbotClicked, setChatbotClicked }) => {
   );
 };
 
-export default LazyChatbot;
+export default ChatbotModal;
diff --git a/src/components/ActionBar/styles.js b/src/components/ActionBar/styles.js
@@ -70,6 +70,10 @@ const flexStyling = css`
 const middleAlignment = css`
   display: grid;
   ${centerGridStyling}
+
+  @media ${theme.screenSize.upToMedium} {
+    grid-template-columns: repeat(12, 1fr);
+  }
 `;
 
 const leftInGrid = css`
@@ -99,7 +103,6 @@ const centerInGrid = css`
   }
   @media ${theme.screenSize.upToMedium} {
     grid-column: 3/-2;
-    padding-right: ${theme.size.small};
   }
 `;
 
@@ -272,6 +275,12 @@ export const searchIconStyling = css`
   ${displayNone.onLargerThanMedium};
   float: right;
   justify-content: right;
+
+  @media ${theme.screenSize.upToMedium} {
+    > div {
+      justify-content: flex-end;
+    }
+  }
 `;
 
 export const offlineStyling = css`
@@ -282,5 +291,14 @@ export const offlineStyling = css`
 
 export const buttonStyling = css`
   text-wrap-mode: nowrap;
-  ${displayNone.onMobileAndTablet}
+  ${displayNone.onMobileAndTablet};
+
+  &:not(:lang(EN)) {
+    display: none;
+  }
+`;
+
+export const mobileButtonStyling = css`
+  cursor: pointer;
+  ${displayNone.onLargerThanTablet};
 `;