DOP-5203: change Chatbot access from search input to button

src/components/ActionBar/ActionBar.js

@@ -1,12 +1,15 @@
-import React, { useContext } from 'react';
+import React, { lazy, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { cx } from '@leafygreen-ui/emotion';
 import Icon from '@leafygreen-ui/icon';
 import { Overline } from '@leafygreen-ui/typography';
+import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
+import { useSiteMetadata } from '../../hooks/use-site-metadata';
 import { isBrowser } from '../../utils/is-browser';
 import { getPlaintext } from '../../utils/get-plaintext';
 import { getNestedValue } from '../../utils/get-nested-value';
 import { isOfflineDocsBuild } from '../../utils/is-offline-docs-build';
+import { getCurrLocale } from '../../utils/locale';
 import useSnootyMetadata from '../../utils/use-snooty-metadata';
 import { SidenavContext } from '../Sidenav';
 import {
@@ -16,6 +19,7 @@ import {
   useFeedbackData,
   FeedbackContainer,
 } from '../Widgets/FeedbackWidget';
+import { SuspenseHelper } from '../SuspenseHelper';
 import DarkModeDropdown from './DarkModeDropdown';
 import SearchInput from './SearchInput';
 import {
@@ -27,11 +31,17 @@ import {
   overlineStyling,
 } from './styles';
 
+const Chatbot = lazy(() => import('mongodb-chatbot-ui'));
+const ChatbotButton = lazy(() => import('./ChatbotButton'));
+
 export const DEPRECATED_PROJECTS = ['atlas-app-services', 'datalake', 'realm'];
 
 const ActionBar = ({ template, slug, sidenav, ...props }) => {
   const url = isBrowser ? window.location.href : null;
   const metadata = useSnootyMetadata();
+  const { darkMode } = useDarkMode();
+  const { snootyEnv } = useSiteMetadata();
+  const locale = getCurrLocale();
   const feedbackData = useFeedbackData({
     slug,
     url,
@@ -43,6 +53,10 @@ const ActionBar = ({ template, slug, sidenav, ...props }) => {
 
   const { hideMobile, setHideMobile } = useContext(SidenavContext);
 
+  const CHATBOT_SERVER_BASE_URL = ['dotcomprd', 'production'].includes(snootyEnv)
+    ? 'https://knowledge.mongodb.com/api/v1'
+    : 'https://knowledge.staging.corp.mongodb.com/api/v1';
+
   return (
     <div
       className={cx(props.className, actionBarStyling, containerClassname, isOfflineDocsBuild ? offlineStyling : '')}
@@ -60,6 +74,14 @@ const ActionBar = ({ template, slug, sidenav, ...props }) => {
       {!isOfflineDocsBuild && (
         <ActionsBox>
           {template !== 'openapi' && <DarkModeDropdown />}
+          {locale === 'en-us' && (
+            <SuspenseHelper>
+              <Chatbot serverBaseUrl={CHATBOT_SERVER_BASE_URL} darkMode={darkMode}>
+                <ChatbotButton />
+              </Chatbot>
+            </SuspenseHelper>
+          )}
+
           {template !== 'errorpage' && !DEPRECATED_PROJECTS.includes(metadata.project) && (
             <FeedbackProvider page={feedbackData}>
               <FeedbackContainer>

src/components/ActionBar/ChatbotButton.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import { useChatbotContext, ModalView, MongoDbLegalDisclosure, PoweredByAtlasVectorSearch } from 'mongodb-chatbot-ui';
+import { css, cx } from '@leafygreen-ui/emotion';
+import Button from '@leafygreen-ui/button';
+import Icon from '@leafygreen-ui/icon';
+import IconButton from '@leafygreen-ui/icon-button';
+import { reportAnalytics } from '../../utils/report-analytics';
+import { displayNone } from '../../utils/display-none';
+import { SparkleIcon } from './SparkIcon';
+
+const buttonStyling = css`
+  text-wrap-mode: nowrap;
+  ${displayNone.onMobileAndTablet}
+`;
+
+const iconStyling = css`
+  ${displayNone.onLargerThanTablet}
+`;
+
+const ChatbotButton = () => {
+  const { openChat } = useChatbotContext();
+  const onClick = () => {
+    reportAnalytics('Chatbot button clicked');
+    openChat();
+  };
+  return (
+    <>
+      <Button
+        className={cx(buttonStyling)}
+        leftGlyph={<Icon glyph="Sparkle" />}
+        aria-label={'Ask MongoDB AI'}
+        variant={'primaryOutline'}
+        onClick={onClick}
+      >
+        Ask Mongodb AI
+      </Button>
+      <IconButton className={iconStyling} variant={'primaryOutline'} aria-label="Ask MongoDB AI" onClick={onClick}>
+        <SparkleIcon />
+      </IconButton>
+      <ModalView
+        inputBottomText={
+          'This is an experimental generative AI chatbot. All information should be verified prior to use.'
+        }
+        disclaimer={
+          <>
+            <MongoDbLegalDisclosure />
+            <PoweredByAtlasVectorSearch
+              linkStyle="text"
+              className={css`
+                margin-top: 8px;
+              `}
+            />
+          </>
+        }
+      />
+    </>
+  );
+};
+
+export default ChatbotButton;