DOP-4040: bump chatbot to v0.0.6 (#914)

Co-authored-by: Seung Park <[email protected]>
Co-authored-by: Nick Larew <[email protected]>

package.json

@@ -115,7 +115,7 @@
     "lodash": "^4.6.0",
     "minimist": "^1.2.6",
     "mobx": "^6.1.5",
-    "mongodb-chatbot-ui": "^0.0.4",
+    "mongodb-chatbot-ui": "^0.0.6",
     "no-scroll": "^2.1.1",
     "node-fetch": "^3.3.2",
     "process": "^0.11.10",

src/components/ChatbotUi.js

@@ -20,7 +20,7 @@ const landingTemplateStyling = css`
   position: sticky;
   top: 0px;
   display: grid;
-  padding: ${theme.size.default} 0;
+  padding: 0;
   // Use landing template's grid layout to help with alignment
   @media ${theme.screenSize.mediumAndUp} {
     grid-template-columns: minmax(${theme.size.xlarge}, 1fr) repeat(12, minmax(0, ${CONTENT_MAX_WIDTH / 12}px)) minmax(
@@ -57,7 +57,8 @@ const StyledChatBotUiContainer = styled.div`
   box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.1);
 
   > div {
-    max-width: 830px;
+    max-width: 862px;
+    margin-left: -32px;
 
     p {
       color: ${palette.black};
@@ -77,8 +78,16 @@ const ChatbotUi = ({ template }) => {
   return (
     <StyledChatBotUiContainer data-testid="chatbot-ui" template={template}>
       {/* We wrapped this in a Suspense. We can use this opportunity to render a loading state if we decided we want that */}
-      <Suspense fallback={<Skeleton borderRadius={SKELETON_BORDER_RADIUS} width={771} height={82} />}>
-        <LazyChatbot serverBaseUrl={CHATBOT_SERVER_BASE_URL} />
+      <Suspense fallback={<Skeleton borderRadius={SKELETON_BORDER_RADIUS} height={82} />}>
+        <LazyChatbot
+          serverBaseUrl={CHATBOT_SERVER_BASE_URL}
+          suggestedPrompts={[
+            'How do you deploy a free cluster in Atlas?',
+            'How do you import or migrate data into MongoDB Atlas?',
+            'Get started with MongoDB',
+            'Why should I use Atlas Search?',
+          ]}
+        />
       </Suspense>
     </StyledChatBotUiContainer>
   );