Dop 4515

gatsby-ssr.js

@@ -1,23 +1,25 @@
 import React from 'react';
+import { Script } from 'gatsby';
 import { ThemeProvider } from '@emotion/react';
 import { renderStylesToString } from '@leafygreen-ui/emotion';
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
+
 import { renderToString } from 'react-dom/server';
 import { theme } from './src/theme/docsTheme';
 import EuclidCircularASemiBold from './src/styles/fonts/EuclidCircularA-Semibold-WebXL.woff';
 
 export const onRenderBody = ({ setHeadComponents }) => {
   setHeadComponents([
     // GTM Pathway
-    <script
+    <Script
       key="pathway"
       type="text/javascript"
       dangerouslySetInnerHTML={{
         __html: `!function(e,n){var t=document.createElement("script"),o=null,x="pathway";t.async=!0,t.src='https://'+x+'.mongodb.com/'+(e?x+'-debug.js':''),document.head.append(t),t.addEventListener("load",function(){o=window.pathway.default,(n&&o.configure(n)),o.createProfile("mongodbcom").load(),window.segment=o})}();`,
       }}
     />,
     // Delighted
-    <script
+    <Script
       key="delighted"
       type="text/javascript"
       dangerouslySetInnerHTML={{

src/components/Widgets/ChatbotWidget/ChatbotFab.js

@@ -1,26 +1,73 @@
-import { lazy, Fragment } from 'react';
+import React, { lazy, Fragment, useTransition, useState } from 'react';
 import styled from '@emotion/styled';
-import { css } from '@leafygreen-ui/emotion';
+import { css, cx } from '@leafygreen-ui/emotion';
+import { palette } from '@leafygreen-ui/palette';
+import Icon from '@leafygreen-ui/icon';
+import { SuspenseHelper } from '../../SuspenseHelper';
+import { SpinnerIcon } from '../FeedbackWidget/icons';
+
+import { theme } from '../../../theme/docsTheme';
 import { useSiteMetadata } from '../../../hooks/use-site-metadata';
 import { DEFAULT_MAX_INPUT, defaultSuggestedPrompts } from '../../ChatbotUi';
 import { MongoDbLegalDisclosure } from './MongoDBLegal';
 import { PoweredByAtlasVectorSearch } from './PoweredByAtlasSearch';
 
 const Chatbot = lazy(() => import('mongodb-chatbot-ui'));
-const FloatingActionButtonTrigger = lazy(() =>
-  import('mongodb-chatbot-ui').then((module) => ({ default: module.FloatingActionButtonTrigger }))
-);
+
 const ModalView = lazy(() => import('mongodb-chatbot-ui').then((module) => ({ default: module.ModalView })));
 
+const containerStyle = css`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+  padding: 12px ${theme.size.default};
+  background-color: ${palette.white};
+  border: 1px solid ${palette.green.dark1};
+  border-radius: 40px;
+  box-shadow: 0px 4px 10px -4px ${palette.gray.light2};
+  z-index: 9;
+  color: ${palette.green.dark2};
+  font-weight: 600;
+  font-size: 13px;
+  line-height: 20px;
+
+  :hover {
+    box-shadow: 0px 0px 0px 3px ${palette.blue.light2};
+  }
+
+  @media ${theme.screenSize.upToSmall} {
+    bottom: ${theme.size.medium};
+    right: ${theme.size.medium};
+  }
+`;
+
+const sparkIconStyle = css`
+  color: ${palette.green.dark1};
+`;
+
 const StyledChatBotFabContainer = styled.div`
   > button {
     border-width: 1px;
     position: unset;
   }
 `;
-
+const ChatbotButton = ({ onClick, isLoading = false }) => {
+  return isLoading ? (
+    <button className={cx(containerStyle)} onClick={onClick} disabled={true}>
+      <SpinnerIcon />
+    </button>
+  ) : (
+    <button className={cx(containerStyle)} onClick={onClick}>
+      <Icon className={sparkIconStyle} glyph="Sparkle" />
+      {CHATBOT_WIDGET_TEXT}
+    </button>
+  );
+};
 const ChatbotFab = () => {
   const { snootyEnv } = useSiteMetadata();
+  const [isOpen, setIsOpen] = useState(false);
+  const [isPending, startTransition] = useTransition();
   const CHATBOT_SERVER_BASE_URL =
     snootyEnv === 'dotcomprd'
       ? 'https://knowledge.mongodb.com/api/v1'
@@ -30,25 +77,45 @@ const ChatbotFab = () => {
       // Classname below to help ignore element for screenshots
       className={fabChatbot}
     >
-      <Chatbot name="MongoDB AI" maxInputCharacters={DEFAULT_MAX_INPUT} serverBaseUrl={CHATBOT_SERVER_BASE_URL}>
-        <FloatingActionButtonTrigger text={CHATBOT_WIDGET_TEXT} />
-        <ModalView
-          disclaimer={
-            <Fragment>
-              <MongoDbLegalDisclosure />
-              <PoweredByAtlasVectorSearch
-                linkStyle="text"
-                className={css`
-                  margin-top: 8px;
-                `}
-              />
-            </Fragment>
+      <SuspenseHelper fallback={null}>
+        <ChatbotButton
+          isLoading={isPending}
+          onClick={() =>
+            startTransition(() => {
+              setIsOpen(!isOpen);
+            })
           }
-          initialMessageText="Welcome to the MongoDB AI Assistant. What can I help you with?"
-          initialMessageSuggestedPrompts={defaultSuggestedPrompts}
-          inputBottomText={BOTTOM_TEXT}
         />
-      </Chatbot>
+        {isOpen && (
+          <Chatbot
+            open={isOpen}
+            name="MongoDB AI"
+            maxInputCharacters={DEFAULT_MAX_INPUT}
+            serverBaseUrl={CHATBOT_SERVER_BASE_URL}
+            closeChatOverride={() => {
+              setIsOpen(false);
+              return true;
+            }}
+          >
+            <ModalView
+              disclaimer={
+                <Fragment>
+                  <MongoDbLegalDisclosure />
+                  <PoweredByAtlasVectorSearch
+                    linkStyle="text"
+                    className={css`
+                      margin-top: 8px;
+                    `}
+                  />
+                </Fragment>
+              }
+              initialMessageText="Welcome to the MongoDB AI Assistant. What can I help you with?"
+              initialMessageSuggestedPrompts={defaultSuggestedPrompts}
+              inputBottomText={BOTTOM_TEXT}
+            />
+          </Chatbot>
+        )}
+      </SuspenseHelper>
     </StyledChatBotFabContainer>
   );
 };