DOP-5203: change Chatbot access from search input to button (#1311)

mongodb · Nov 27, 2024 · 53ba6b7 · 53ba6b7
1 parent f729b9e
commit 53ba6b7
Show file tree

Hide file tree

Showing 10 changed files with 233 additions and 449 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/ActionBar/ActionBar.js b/src/components/ActionBar/ActionBar.js
@@ -1,12 +1,18 @@
-import React, { useContext } from 'react';
+import React, { lazy, useState, useContext } from 'react';
 import PropTypes from 'prop-types';
+import Button from '@leafygreen-ui/button';
 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 IconButton from '@leafygreen-ui/icon-button';
+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 { reportAnalytics } from '../../utils/report-analytics';
 import useSnootyMetadata from '../../utils/use-snooty-metadata';
 import { SidenavContext } from '../Sidenav';
 import {
@@ -16,6 +22,7 @@ import {
   useFeedbackData,
   FeedbackContainer,
 } from '../Widgets/FeedbackWidget';
+import { SuspenseHelper } from '../SuspenseHelper';
 import DarkModeDropdown from './DarkModeDropdown';
 import SearchInput from './SearchInput';
 import {
@@ -25,13 +32,21 @@ import {
   getContainerStyling,
   offlineStyling,
   overlineStyling,
+  chatbotButtonStyling,
+  chatbotMobileButtonStyling,
 } from './styles';
 
+const Chatbot = lazy(() => import('mongodb-chatbot-ui'));
+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;
   const metadata = useSnootyMetadata();
+  const [chatbotClicked, setChatbotClicked] = useState(false);
+  const locale = getCurrLocale();
   const feedbackData = useFeedbackData({
     slug,
     url,
@@ -43,6 +58,16 @@ const ActionBar = ({ template, slug, sidenav, ...props }) => {
 
   const { hideMobile, setHideMobile } = useContext(SidenavContext);
 
+  const openChatbot = () => {
+    reportAnalytics('Chatbot button clicked');
+    setChatbotClicked((currVal) => !currVal);
+  };
+  const { snootyEnv } = useSiteMetadata();
+  const { darkMode } = useDarkMode();
+  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 : '')}
@@ -59,7 +84,26 @@ const ActionBar = ({ template, slug, sidenav, ...props }) => {
       </ActionBarSearchContainer>
       {!isOfflineDocsBuild && (
         <ActionsBox>
-          {template !== 'openapi' && <DarkModeDropdown />}
+          <Button
+            className={cx(chatbotButtonStyling)}
+            leftGlyph={<Icon glyph="Sparkle" />}
+            aria-label={CHATBOT_TEXT}
+            variant={'primaryOutline'}
+            onClick={openChatbot}
+          >
+            {CHATBOT_TEXT}
+          </Button>
+          <IconButton className={chatbotMobileButtonStyling} aria-label={CHATBOT_TEXT} onClick={openChatbot}>
+            <Icon glyph={'Sparkle'} />
+          </IconButton>
+          {locale === 'en-us' && (
+            <SuspenseHelper>
+              <Chatbot serverBaseUrl={CHATBOT_SERVER_BASE_URL} darkMode={darkMode}>
+                <ChatbotModal chatbotClicked={chatbotClicked} setChatbotClicked={setChatbotClicked} />
+              </Chatbot>
+            </SuspenseHelper>
+          )}
+
           {template !== 'errorpage' && !DEPRECATED_PROJECTS.includes(metadata.project) && (
             <FeedbackProvider page={feedbackData}>
               <FeedbackContainer>
@@ -68,6 +112,7 @@ const ActionBar = ({ template, slug, sidenav, ...props }) => {
               </FeedbackContainer>
             </FeedbackProvider>
           )}
+          {template !== 'openapi' && <DarkModeDropdown />}
         </ActionsBox>
       )}
     </div>

diff --git a/src/components/ActionBar/ChatbotControls.js b/src/components/ActionBar/ChatbotControls.js
diff --git a/src/components/ActionBar/ChatbotModal.js b/src/components/ActionBar/ChatbotModal.js
@@ -0,0 +1,37 @@
+import React, { useEffect } from 'react';
+import { useChatbotContext, ModalView, MongoDbLegalDisclosure, PoweredByAtlasVectorSearch } from 'mongodb-chatbot-ui';
+import { css } from '@leafygreen-ui/emotion';
+import { defaultSuggestedPrompts } from '../ChatbotUi';
+
+const ChatbotModal = ({ chatbotClicked, setChatbotClicked }) => {
+  const { openChat } = useChatbotContext();
+  useEffect(() => {
+    if (chatbotClicked) {
+      openChat();
+      setChatbotClicked(false);
+    }
+  }, [chatbotClicked, openChat, setChatbotClicked]);
+
+  return (
+    <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;
+            `}
+          />
+        </>
+      }
+      initialMessageText={'Welcome to MongoDB AI'}
+      initialMessageSuggestedPrompts={defaultSuggestedPrompts}
+    />
+  );
+};
+
+export default ChatbotModal;