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 }}

docusaurus.config.js

@@ -271,12 +271,6 @@ module.exports = {
         return `https://github.com/SumoLogic/sumologic-documentation/issues/new?title=${query}`;
       },
     },
-    announcementBar: {
-      id: 'copilot',
-      content: 'Check out 🤖 <b><a target="_blank" rel="noopener noreferrer" href="/docs/search/copilot">Sumo Logic Copilot</a></b>, our new AI-powered logs assistant!',
-      backgroundColor: '#D3BAF7',
-      textColor: '#000',
-    },
     prism: {
       theme: lightCodeTheme,
       darkTheme: darkCodeTheme,

package.json

@@ -51,6 +51,7 @@
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@mdx-js/node-loader": "^3.0.0",
     "@mdx-js/react": "^3.0.0",
+    "@mui/icons-material": "^6.3.1",
     "@mui/lab": "^5.0.0-alpha.108",
     "@mui/material": "^5.16.7",
     "@mui/system": "^5.16.7",

src/css/sumo.scss

@@ -227,6 +227,11 @@ html[data-theme='light'] {
   min-width: 100px;
 }
 
+/* Berry chatbot inline height */
+#inline-berry-chatbot-container iframe {
+  height: 600px !important;
+}
+
 //GitHub icon
 .header-github-link:hover {
   opacity: 0.6;

src/pages/index.tsx

@@ -1,50 +1,189 @@
-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 { Box, Button, Container, Grid, Stack, Tab, Tabs, Typography, Switch } from '@mui/material';
 import { TabContext, TabPanel } from '@mui/lab';
+import { LightMode, DarkMode } from '@mui/icons-material'; // <-- Icons
 import bgImage from '../../static/img/hero-secondary-background.webp';
 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';
 
 export const Home = () => {
   const [tab, setTab] = useState('0');
 
+  // Track whether we're in dark mode:
+  const [isDark, setIsDark] = useState(false);
+
+  const questions = [
+    '✨ timestamps',
+    '✨ how do you write a log search query?',
+    '✨ how do I set up alerts?',
+    '✨ what types of logs can I analyze?',
+    '✨ what is copilot?',
+    '✨ cloud siem',
+    '✨ how do I change my password?',
+    '✨ what is the parse operator?'
+  ];
+
+  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: true,
+          botUrlPath: 'nova',
+          showNewChat: true,
+          parentElementId: 'inline-berry-chatbot-container',
+          // If we want to start in dark mode by default, uncomment:
+          // colorMode: 'dark',
+        });
+      };
+
+      script.onerror = () => console.error('Failed to load Berry widget script');
+    }
+  }, []);
+
+  // Send a question to Berry:
+  const handleQuestionClick = (question) => {
+    if (window.Berry) {
+      if (window.Berry.sendMessage) {
+        window.Berry.sendMessage(question);
+      }
+      if (window.Berry.open) {
+        window.Berry.open();
+      }
+    }
+  };
+
+  // Toggle Berry's theme on switch change:
+  const handleToggle = (event) => {
+    const newValue = event.target.checked; // true = dark mode, false = light mode
+    setIsDark(newValue);
+
+    if (window.Berry && window.Berry.update) {
+      window.Berry.update({
+        colorMode: newValue ? 'dark' : 'light'
+      });
+    }
+  };
+
   return (
     <ErrorBoundary>
       <Layout
         description='Sumo Logic docs - real-time alerting, security, dashboards, and machine-learning-powered analytics for all three types of telemetry — logs, metrics, and traces.'
         title='Home'
       >
-        {/* Header */}
-        <Typography
-          bgcolor='#0045BE'
-          color='#e3e3e3'
-          fontFamily='Lab Grotesque'
-          fontSize={28}
-          fontWeight={700}
-          pt={3}
-          px={2}
-          pb={1}
-          sx={{
-            backgroundImage: 'linear-gradient(to right, rgb(0,0,153), rgb(0,70,190) 30%)',
-          }}
-          textAlign='center'
-        >
-          <Box
-            component={SumoLogicDocsLogo}
-            alt="Sumo Logic Docs logo"
-            role="<img>"
-            aria-hidden="true"
-            height={{
-              md: 36,
-              xs: 28,
-            }}
-            width='100%'
-          />
-        </Typography>
+        {/* Suggested Questions */}
+        <Box sx={{ width: '100%', background: '#2a2a2a', color: '#fff', py: 4 }}>
+          <Container maxWidth="md" sx={{ textAlign: 'center' }}>
+            <Box
+              component={SumoLogicDocsLogo}
+              alt="Sumo Logic Docs logo"
+              role="<img>"
+              aria-hidden="true"
+              height={{
+                md: 30,
+                xs: 22,
+              }}
+              width='100%'
+            />
+            <Typography
+              fontFamily="Lab Grotesque"
+              variant='h3'
+              fontSize={32}
+              fontWeight={700}
+              mt={2}
+              mb={2}
+              sx={{
+                background: 'linear-gradient(90deg, #9900ED, #C04CF4, #00C8E0)',
+                WebkitBackgroundClip: 'text',
+                WebkitTextFillColor: 'transparent'
+              }}
+            >
+              Our Docs Assistant is here to help!
+            </Typography>
+            <Typography
+              fontFamily="Lab Grotesque"
+              fontSize={13}
+              fontWeight={300}
+              mb={2}
+            >
+              Ask me anything! You can type full questions, sentences, or just keywords, and I'll help you find the information you need. Try these to get started:
+            </Typography>
+            <Stack
+              direction="row"
+              spacing={1}
+              justifyContent="center"
+              flexWrap="wrap"
+              rowGap={1}
+            >
+              {questions.map((question, index) => (
+                <Button
+                  key={index}
+                  onClick={() => handleQuestionClick(question)}
+                  variant="outlined"
+                  sx={{
+                    bgcolor: 'transparent',
+                    color: '#DDDDDD',
+                    fontFamily: 'Lab Grotesque',
+                    borderColor: '#808080',
+                    borderRadius: '5px',
+                    textTransform: 'lowercase',
+                    fontSize: '13px',
+                    fontWeight: '300',
+                    padding: '4px 6px',
+                    minWidth: 'auto',
+                    '&:hover': {
+                      bgcolor: '#2a2a2a',
+                      color: '#DDDDDD',
+                    },
+                  }}
+                >
+                  {question}
+                </Button>
+              ))}
+            </Stack>
+
+            {/* Inline Chatbot Container */}
+            <Box
+              id="inline-berry-chatbot-container"
+              sx={{ my: 4, p: 2, margin: '0 auto', textAlign: 'center' }}
+            >
+              {/* Berry chatbot will render here */}
+            </Box>
+
+            {/* Light/Dark Toggle Switch with icons */}
+            <Stack direction="row" spacing={1} alignItems="center" justifyContent="center">
+              {/* Label: Light */}
+              <Typography variant="body2" color="#fff">
+                Light
+              </Typography>
+              <Switch
+                checked={isDark}
+                onChange={handleToggle}
+                color="default"
+                // Sun icon when off (light), moon icon when on (dark)
+                icon={<LightMode />}      // Unchecked icon
+                checkedIcon={<DarkMode />} // Checked icon
+              />
+              {/* Label: Dark */}
+              <Typography variant="body2" color="#fff">
+                Dark
+              </Typography>
+            </Stack>
+          </Container>
+        </Box>
 
         {/* Hero */}
         <Stack
@@ -83,10 +222,7 @@ export const Home = () => {
               }}
               height='100%'
             >
-              <Grid
-                item
-                md={6}
-              >
+              <Grid item md={6}>
                 <Stack
                   alignItems={{
                     md: 'flex-start',
@@ -183,7 +319,6 @@ export const Home = () => {
 
         {/* Main */}
         <Container maxWidth='xl'>
-
           {/* Product Guides */}
           <Stack
             alignItems='center'
@@ -260,7 +395,7 @@ export const Home = () => {
                   {
                     label: 'Other Solutions',
                   },
-                ].map(({ label, ...rest }, index) => (
+                ].map(({ label }, index) => (
                   <Tab
                     key={label}
                     label={label}
@@ -270,40 +405,40 @@ export const Home = () => {
                       fontWeight: 'bold',
                     }}
                     value={String(index)}
-                    {...rest}
                   />
                 ))}
               </Tabs>
-              {features.map((feature, index) => tab === String(index) && (
-                <Grid
-                  component={TabPanel}
-                  container
-                  direction='row'
-                  justifyContent='center'
-                  key={index}
-                  py={6}
-                  spacing={4}
-                  value={String(index)}
-                >
-                  {feature.map((config) => (
-                    <Grid
-                      item
-                      key={config.link}
-                      lg={4}
-                      md={6}
-                      xs={12}
-                    >
-                      <Feature
-                        length={feature.length}
-                        {...config}
-                      />
-                    </Grid>
-                  ))}
-                </Grid>
+              {features.map((feature, index) => (
+                tab === String(index) && (
+                  <Grid
+                    component={TabPanel}
+                    container
+                    direction='row'
+                    justifyContent='center'
+                    key={index}
+                    py={6}
+                    spacing={4}
+                    value={String(index)}
+                  >
+                    {feature.map((config) => (
+                      <Grid
+                        item
+                        key={config.link}
+                        lg={4}
+                        md={6}
+                        xs={12}
+                      >
+                        <Feature
+                          length={feature.length}
+                          {...config}
+                        />
+                      </Grid>
+                    ))}
+                  </Grid>
+                )
               ))}
             </TabContext>
           </Stack>
-
         </Container>
       </Layout>
     </ErrorBoundary>