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 && } + + ); +}