Berry Demo - Feb 2025

Author: kimsauce

.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,

src/components/Berry/index.tsx

@@ -0,0 +1,108 @@
+import React, { useEffect } from "react";
+
+export type BerryMode = "inline" | "popup";
+export interface BerryProps {
+    mode: BerryMode;
+};
+
+declare global {
+  interface Window {
+    Berry: any;
+  }
+}
+
+export default function Berry({ mode }: BerryProps) {
+     useEffect(() => {
+        function onColorModeChange(newColorMode) {
+          if (!window.Berry) {
+            return;
+          }
+
+          window.Berry.update({
+            colorMode: newColorMode,
+          })
+        }
+
+        const observer = new MutationObserver((mutations) => {
+          mutations.forEach((mutation) => {
+            if (mutation.attributeName === 'data-theme') {
+              const newColorMode = getCurrentColorMode();
+              onColorModeChange(newColorMode);
+            }
+          });
+        });
+
+        observer.observe(document.documentElement, { attributes: true });
+      }, []);
+
+    useEffect(() => {
+        loadBerry(mode);
+    }, [mode]);
+    return null;
+}
+
+function loadBerry(mode: BerryMode) {
+    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 = () => {
+          initBerry(mode);
+        }
+
+        script.onerror = () => console.error('Failed to load Berry widget script');
+      } else {
+        initBerry(mode);
+      }
+    }
+
+function initBerry(mode: BerryMode) {
+    if (!window.Berry) {
+      console.error("Berry not defined");
+      return;
+    }
+
+    const colorMode = getCurrentColorMode();
+    const config = {
+        ...(mode === 'inline' ? inlineConfig : popupConfig),
+        colorMode: colorMode,
+    };
+
+    window.Berry.init(config);
+  };
+
+  function getCurrentColorMode(): 'light' | 'dark' {
+    const theme = document.documentElement.getAttribute('data-theme');
+    if (theme === 'light' || theme === 'dark') {
+      return theme;
+    } else {
+      return 'light';
+    }
+  }
+
+
+  const commonConfig = {
+    token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE3MjU5NDg5MTcsImV4cCI6MTc0MTYwODkxNywiYXVkIjoiV2lkZ2V0SW5pdGlhbGl6YXRpb24iLCJvcmdhbml6YXRpb25JZCI6NjN9.oJEGkGq1q3uFD66J916f_ZBrqQjPHP9orUOKFxInG38',
+    primaryColor: '#021b9a',
+    botUrlPath: 'nova',
+    showNewChat: true,
+    resumeChat: true,
+  }
+
+  const inlineConfig = {
+    ...commonConfig,
+    isOpenByDefault: true,
+    parentElementId: 'inline-berry-chatbot-container',
+    hideToggle: true,
+    height: 700,
+    showResize: false,
+  }
+
+  const popupConfig = {
+    ...commonConfig,
+    position: { side: 'right', offsetX: 25, offsetY: 100 },
+    isOpenByDefault: false,
+  }

src/css/sumo.scss

@@ -227,6 +227,11 @@ html[data-theme='light'] {
   min-width: 100px;
 }
 
+/* Berry CSS override to 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,45 +7,94 @@ 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 Berry from '../components/Berry';
 
 export const Home = () => {
   const [tab, setTab] = useState('0');
 
+  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?'
+  ];
+
+  const handleQuestionClick = (question) => {
+    if (window.Berry) {
+      if (window.Berry.sendMessage) {
+        window.Berry.sendMessage(question);
+      }
+    }
+  };
+
   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>
 
+        <Berry mode='inline' />
+
+        {/* Suggested Questions */}
+        <Box sx={{ width: '100%', background: '#2a2a2a', color: '#fff', py: 4 }}>
+
+          <Container maxWidth="md" sx={{ textAlign: 'center' }}>
+          <Typography variant="h4" fontWeight={600} mt={1} mb={3}>
+            Sumo Logic Documentation
+          </Typography>
+            <Typography variant="h5" fontFamily="Lab Grotesque" fontWeight={300} 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} // Reduced horizontal spacing between buttons
+            justifyContent="center"
+            flexWrap="wrap"
+            rowGap={1} // Reduced vertical spacing between rows
+            >
+
+    {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: '12px',
+          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' }}>
+            {/* The chatbot will render here */}
+            </Box>
+          </Container>
+        </Box>
         {/* Hero */}
         <Stack
           sx={{

src/theme/Root.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import Berry from '../components/Berry';
+import { useLocation } from '@docusaurus/router';
+
+export default function Root({ children }: { children: React.ReactNode }) {
+    const location = useLocation();
+    return (
+    <>
+        {children}
+        {location.pathname !== '/' && <Berry mode='popup' />}
+    </>
+    );
+}