DOCS-543 - Berry widget demo env

.github/workflows/pr.yml

@@ -32,6 +32,17 @@ jobs:
           env:
             NODE_OPTIONS: "--max-old-space-size=8192 --max-http-header-size=8192"
           run: yarn build
+    deploy-to-review:
+      uses: SumoLogic/sumologic-documentation/.github/workflows/build_and_deploy.yml@main
+      with:
+        hostname: https://d2t1s0ah22jxsa.cloudfront.net
+        base_url: /${{ github.ref_name }}/
+        environment: review/${{ github.ref_name }}
+      secrets:
+        S3_BUCKET_NAME: ${{ secrets.REVIEW_S3_BUCKET_NAME }}
+        CLOUDFRONT_DISTRIBUTION_ID: ${{ secrets.REVIEW_CLOUDFRONT_DISTRIBUTION_ID }}
+        AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+        AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
     spellcheck:
       runs-on: ubuntu-latest
       steps:

.github/workflows/review.yml

@@ -0,0 +1,16 @@
+name: deploy-to-review
+
+on: workflow_dispatch
+
+jobs:
+  deploy-to-review:
+    uses: SumoLogic/sumologic-documentation/.github/workflows/build_and_deploy.yml@main
+    with:
+      hostname: https://d2t1s0ah22jxsa.cloudfront.net
+      base_url: /${{ github.ref_name }}/
+      environment: review/${{ github.ref_name }}
+    secrets:
+      S3_BUCKET_NAME: ${{ secrets.REVIEW_S3_BUCKET_NAME }}
+      CLOUDFRONT_DISTRIBUTION_ID: ${{ secrets.REVIEW_CLOUDFRONT_DISTRIBUTION_ID }}
+      AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+      AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

src/css/sumo.scss

@@ -227,6 +227,11 @@ html[data-theme='light'] {
   min-width: 100px;
 }
 
+/* Example: Force global styles back to normal */
+body, .MuiTypography-root, button, input, select, textarea {
+  font-family: 'Lab Grotesque', sans-serif !important;
+}
+
 //GitHub icon
 .header-github-link:hover {
   opacity: 0.6;

src/pages/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import Layout from '@theme/Layout';
 import { Box, Button, Container, Grid, Stack, Tab, Tabs, Typography } from '@mui/material';
 import { TabContext, TabPanel } from '@mui/lab';
@@ -7,11 +7,116 @@ import heroImage from '../../static/img/hero-secondary-graphic.webp';
 import SumoLogicDocsLogo from '../../static/img/sumo-logic-docs.svg';
 import { Feature } from '../components/Feature';
 import { features } from '../helper/features';
-import ErrorBoundary from '../components/ErrorBoundary'; // Import the ErrorBoundary component
+import ErrorBoundary from '../components/ErrorBoundary';
+import { SvgIcon } from '@mui/material';
+
+const ChatIcon = (props) => (
+  <SvgIcon {...props} viewBox="0 0 27 27" sx={{ bgcolor: '#0045BE', borderRadius: '50%', padding: '3px' }}>
+    <path
+      fill="none"
+      stroke="white"
+      strokeWidth="2"
+      d="M18 3H9C5.5 3 3 5.5 3 9V14C3 18 5.5 20.5 9 20.5H13.5L19 25V20.5H18C22 20.5 24.5 18 24.5 14V9C24.5 5.5 22 3 18 3Z"
+    />
+  </SvgIcon>
+);
 
 export const Home = () => {
   const [tab, setTab] = useState('0');
 
+  const questions = [
+    'How can I set up alerts?',
+    'What is real-time monitoring?',
+    'How do I use dashboards?',
+    'What types of logs can I analyze?',
+    'How do I secure my environment?',
+  ];
+
+  useEffect(() => {
+    if (!document.getElementById('berry-widget-script')) {
+      const script = document.createElement('script');
+      script.id = 'berry-widget-script';
+      script.src = 'https://www.berryapp.io/js/berry-widget.min.js';
+      script.async = true;
+      document.head.appendChild(script);
+
+      script.onload = () => {
+        const widgetJwt = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE3MjU5NDg5MTcsImV4cCI6MTc0MTYwODkxNywiYXVkIjoiV2lkZ2V0SW5pdGlhbGl6YXRpb24iLCJvcmdhbml6YXRpb25JZCI6NjN9.oJEGkGq1q3uFD66J916f_ZBrqQjPHP9orUOKFxInG38';
+        window.Berry.init({
+          token: widgetJwt,
+          primaryColor: '#021b9a',
+          position: { side: 'right', offsetX: 25, offsetY: 100 },
+          isOpenByDefault: false,
+          botUrlPath: 'nova',
+          showNewChat: true,
+        });
+
+        // Inject dark mode styles as needed
+        applyDarkModeStyles();
+      };
+
+      script.onerror = () => console.error('Failed to load Berry widget script');
+    }
+
+    // Inject dark mode styles on initial load
+    applyDarkModeStyles();
+
+    // Listen for theme change events if your site supports dynamic theme switching
+    window.addEventListener('themeChange', applyDarkModeStyles);
+
+    return () => {
+      window.removeEventListener('themeChange', applyDarkModeStyles);
+    };
+  }, []);
+
+  const applyDarkModeStyles = () => {
+    const isDarkMode = document.body.getAttribute('data-theme') === 'dark';
+    const styleId = 'dark-mode-styles';
+
+    // Remove existing dark mode styles to avoid duplicates
+    const existingStyle = document.getElementById(styleId);
+    if (existingStyle) existingStyle.remove();
+
+    // Apply dark mode styles only if in dark mode
+    if (isDarkMode) {
+      const style = document.createElement('style');
+      style.id = styleId;
+      style.innerHTML = `
+        body {
+          background-color: #121212 !important;
+          color: #ffffff !important;
+        }
+        a {
+          color: #90caf9 !important;
+        }
+        .MuiButton-outlined {
+          border-color: #90caf9 !important;
+          color: #90caf9 !important;
+        }
+        .MuiButton-outlined:hover {
+          background-color: #0045BE !important;
+          color: #ffffff !important;
+        }
+        .MuiTypography-root {
+          color: #ffffff !important;
+        }
+        /* Add more styles as necessary */
+      `;
+      document.head.appendChild(style);
+    }
+  };
+
+  const handleQuestionClick = (question) => {
+    if (window.Berry) {
+      if (window.Berry.sendMessage) {
+        window.Berry.sendMessage(question);
+      }
+      if (window.Berry.open) {
+        window.Berry.open();
+      }
+    }
+  };
+
   return (
     <ErrorBoundary>
       <Layout
@@ -46,6 +151,42 @@ export const Home = () => {
           />
         </Typography>
 
+        {/* Suggested Questions */}
+        <Box sx={{ width: '100%', bgcolor: '#f9f9f9', py: 4 }}>
+          <Container maxWidth="md" sx={{ textAlign: 'center' }}>
+            <Typography variant="h5" fontFamily="Lab Grotesque" fontWeight={700} mb={1}>
+              Explore our new chatbot in the lower right corner!
+            </Typography>
+            <Typography variant="h5" fontFamily="Lab Grotesque" fontWeight={700} mb={2}>
+              Try asking these questions to get started:
+            </Typography>
+            <Stack direction="row" spacing={2} justifyContent="center" flexWrap="wrap" rowGap={2}>
+              {questions.map((question, index) => (
+                <Button
+                  key={index}
+                  onClick={() => handleQuestionClick(question)}
+                  variant="outlined"
+                  sx={{
+                    bgcolor: 'white',
+                    color: '#0045BE',
+                    fontFamily: 'Lab Grotesque',
+                    borderColor: '#0045BE',
+                    '&:hover': {
+                      bgcolor: '#0045BE',
+                      color: 'white',
+                    },
+                  }}
+                >
+                  {question}
+                </Button>
+              ))}
+            </Stack>
+            <Typography variant="body2" color="textSecondary" mt={2}>
+              *Click on the chat icon <ChatIcon fontSize="small" /> in the bottom right if the chatbot does not open automatically.
+            </Typography>
+          </Container>
+        </Box>
+
         {/* Hero */}
         <Stack
           sx={{