diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml
index c36fb9ff9a..881d1b622b 100644
--- a/.github/workflows/pr.yml
+++ b/.github/workflows/pr.yml
@@ -4,34 +4,19 @@ on:
pull_request:
branches:
- main
- merge_group:
- types:
- - checks_requested
jobs:
- build-and-deploy:
- runs-on: ubuntu-22.04
- env:
- CI: true
- NODE_ENV: production
- steps:
- - uses: actions/checkout@v4
- - name: Set up Node.js
- uses: actions/setup-node@v3
- with:
- node-version: '20.x'
- cache: 'yarn'
- - name: Docusaurus Webpack cache
- uses: actions/cache@v3
- with:
- path: node_modules/.cache
- key: ${{ runner.os }}-webpack-cache
- - name: Install dependencies
- run: yarn install --frozen-lockfile
- - name: Build the Docusaurus site
- 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:
diff --git a/docusaurus.config.js b/docusaurus.config.js
index 47650c971c..d0eca9c218 100644
--- a/docusaurus.config.js
+++ b/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 🤖 Sumo Logic Copilot, our new AI-powered logs assistant!',
- backgroundColor: '#D3BAF7',
- textColor: '#000',
- },
prism: {
theme: lightCodeTheme,
darkTheme: darkCodeTheme,
diff --git a/src/components/Berry/index.tsx b/src/components/Berry/index.tsx
new file mode 100644
index 0000000000..e3a312af87
--- /dev/null
+++ b/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,
+ }
diff --git a/src/css/sumo.scss b/src/css/sumo.scss
index 9f2a4c29e6..5988838e48 100644
--- a/src/css/sumo.scss
+++ b/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;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 4fa5bd335c..57df59e389 100644
--- a/src/pages/index.tsx
+++ b/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 (
- {/* Header */}
-
-
-
+
+
+ {/* Suggested Questions */}
+
+
+
+
+ Sumo Logic Documentation
+
+
+ Our Docs Assistant is here to help!
+
+
+ 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:
+
+
+
+ {questions.map((question, index) => (
+
+ ))}
+
+
+ {/* Inline Chatbot Container */}
+
+ {/* The chatbot will render here */}
+
+
+
{/* Hero */}
+ {children}
+ {!isHomePage && }
+ >
+ );
+}