From 9368c064f93726cb852e184f0a3c25db05a9403e Mon Sep 17 00:00:00 2001
From: branberry <brandon.ly@mongodb.com>
Date: Thu, 11 Apr 2024 10:12:56 -0500
Subject: [PATCH 1/2] [DOP-4515]: Add loading state for chatbot button

---
 .../Widgets/ChatbotWidget/ChatbotFab.js       | 113 ++++++++++++++----
 1 file changed, 90 insertions(+), 23 deletions(-)

diff --git a/src/components/Widgets/ChatbotWidget/ChatbotFab.js b/src/components/Widgets/ChatbotWidget/ChatbotFab.js
index 679baf1ea..57450eab0 100644
--- a/src/components/Widgets/ChatbotWidget/ChatbotFab.js
+++ b/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>
   );
 };

From 767815465079b30681383287ffb19e52cb13508c Mon Sep 17 00:00:00 2001
From: branberry <brandon.ly@mongodb.com>
Date: Mon, 15 Apr 2024 10:37:48 -0500
Subject: [PATCH 2/2] [DOP-4515]: Use script tag

---
 gatsby-ssr.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/gatsby-ssr.js b/gatsby-ssr.js
index 2bce4d329..48ac90251 100644
--- a/gatsby-ssr.js
+++ b/gatsby-ssr.js
@@ -1,7 +1,9 @@
 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';
@@ -9,7 +11,7 @@ import EuclidCircularASemiBold from './src/styles/fonts/EuclidCircularA-Semibold
 export const onRenderBody = ({ setHeadComponents }) => {
   setHeadComponents([
     // GTM Pathway
-    <script
+    <Script
       key="pathway"
       type="text/javascript"
       dangerouslySetInnerHTML={{
@@ -17,7 +19,7 @@ export const onRenderBody = ({ setHeadComponents }) => {
       }}
     />,
     // Delighted
-    <script
+    <Script
       key="delighted"
       type="text/javascript"
       dangerouslySetInnerHTML={{