chore: add Unleash AI to New in Unleash (#8642)

https://linear.app/unleash/issue/2-2910/add-unleash-ai-to-new-in-unleash

Adds a new "Unleash AI" item to the "New in Unleash" section.

We don’t have documentation to link to yet, as this is still an
experimental feature. However, I’m considering adding a “Check it out”
button that highlights the button, which I can introduce in a separate
PR.


![image](https://github.com/user-attachments/assets/520362b2-627c-415e-b0bb-296825d5d8ee)

frontend/src/component/ai/AIChat.tsx

@@ -1,6 +1,6 @@
 import { mutate } from 'swr';
 import { ReactComponent as AIIcon } from 'assets/icons/AI.svg';
-import { IconButton, styled, useMediaQuery } from '@mui/material';
+import { IconButton, styled, Tooltip, useMediaQuery } from '@mui/material';
 import { useEffect, useRef, useState } from 'react';
 import useToast from 'hooks/useToast';
 import { formatUnknownError } from 'utils/formatUnknownError';
@@ -198,6 +198,7 @@ export const AIChat = () => {
     if (!open) {
         return (
             <StyledAIIconContainer demoStepsVisible={demoStepsVisible}>
+                <Tooltip arrow title='Unleash AI'>
                     <StyledAIIconButton
                         size='large'
                         onClick={() => {
@@ -211,6 +212,7 @@ export const AIChat = () => {
                     >
                         <AIIcon />
                     </StyledAIIconButton>
+                </Tooltip>
             </StyledAIIconContainer>
         );
     }

frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx

@@ -1,4 +1,3 @@
-import type { ReactNode } from 'react';
 import { useUiFlag } from 'hooks/useUiFlag';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { useLocalStorageState } from 'hooks/useLocalStorageState';
@@ -13,13 +12,18 @@ import {
 } from '@mui/material';
 import Signals from '@mui/icons-material/Sensors';
 import type { NavigationMode } from 'component/layout/MainLayout/NavigationSidebar/NavigationMode';
-import { NewInUnleashItem } from './NewInUnleashItem';
+import {
+    NewInUnleashItem,
+    type NewInUnleashItemDetails,
+} from './NewInUnleashItem';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 import { ReactComponent as SignalsPreview } from 'assets/img/signals.svg';
 import LinearScaleIcon from '@mui/icons-material/LinearScale';
 import { useNavigate } from 'react-router-dom';
 import { useEventTimelineContext } from 'component/events/EventTimeline/EventTimelineContext';
 import { ReactComponent as EventTimelinePreview } from 'assets/img/eventTimeline.svg';
+import { ReactComponent as AIIcon } from 'assets/icons/AI.svg';
+import { ReactComponent as AIPreview } from 'assets/img/aiPreview.svg';
 
 const StyledNewInUnleash = styled('div')(({ theme }) => ({
     margin: theme.spacing(2, 0, 1, 0),
@@ -75,17 +79,11 @@ const StyledLinearScaleIcon = styled(LinearScaleIcon)(({ theme }) => ({
     color: theme.palette.primary.main,
 }));
 
-type NewItem = {
-    label: string;
-    summary: string;
-    icon: ReactNode;
-    onCheckItOut: () => void;
-    docsLink: string;
-    show: boolean;
-    longDescription: ReactNode;
-    preview?: ReactNode;
-    beta?: boolean;
-};
+const StyledAIIcon = styled(AIIcon)(({ theme }) => ({
+    '& > path': {
+        fill: theme.palette.primary.main,
+    },
+}));
 
 interface INewInUnleashProps {
     mode?: NavigationMode;
@@ -102,12 +100,17 @@ export const NewInUnleash = ({
         'new-in-unleash-seen:v1',
         new Set(),
     );
-    const { isOss, isEnterprise } = useUiConfig();
+    const {
+        isOss,
+        isEnterprise,
+        uiConfig: { unleashAIAvailable },
+    } = useUiConfig();
     const signalsEnabled = useUiFlag('signals');
+    const unleashAIEnabled = useUiFlag('unleashAI');
 
     const { setHighlighted } = useEventTimelineContext();
 
-    const items: NewItem[] = [
+    const items: NewInUnleashItemDetails[] = [
         {
             label: 'Signals & Actions',
             summary: 'Listen to signals via Webhooks',
@@ -174,6 +177,30 @@ export const NewInUnleash = ({
                 </>
             ),
         },
+        {
+            label: 'Unleash AI',
+            summary:
+                'Enhance your Unleash experience with the help of the Unleash AI assistant',
+            icon: <StyledAIIcon />,
+            preview: <AIPreview />,
+            show: Boolean(unleashAIAvailable) && unleashAIEnabled,
+            beta: true,
+            longDescription: (
+                <>
+                    <p>
+                        Meet the Unleash AI assistant, designed to make your
+                        experience with Unleash easier and more intuitive,
+                        whether you're handling tasks or looking for guidance.
+                    </p>
+
+                    <p>
+                        Start chatting by using the button in the bottom right
+                        corner of the page, and discover all the ways the
+                        Unleash AI assistant can help you.
+                    </p>
+                </>
+            ),
+        },
     ];
 
     const visibleItems = items.filter(

frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleashItem.tsx

@@ -13,6 +13,18 @@ import { NewInUnleashTooltip } from './NewInUnleashTooltip';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { Badge } from 'component/common/Badge/Badge';
 
+export type NewInUnleashItemDetails = {
+    label: string;
+    summary: string;
+    icon: ReactNode;
+    onCheckItOut?: () => void;
+    docsLink?: string;
+    show: boolean;
+    longDescription: ReactNode;
+    preview?: ReactNode;
+    beta?: boolean;
+};
+
 const StyledItemButton = styled(ListItemButton)(({ theme }) => ({
     outline: `1px solid ${theme.palette.divider}`,
     borderRadius: theme.shape.borderRadiusMedium,
@@ -32,22 +44,17 @@ const StyledItemTitle = styled('div')(({ theme }) => ({
     display: 'flex',
     gap: theme.spacing(1),
     alignItems: 'center',
+    height: theme.spacing(3),
 }));
 
 const StyledItemButtonClose = styled(IconButton)(({ theme }) => ({
     padding: theme.spacing(0.25),
 }));
 
-interface INewInUnleashItemProps {
-    icon: ReactNode;
+interface INewInUnleashItemProps
+    extends Omit<NewInUnleashItemDetails, 'show' | 'beta'> {
     onClick: () => void;
     onDismiss: () => void;
-    label: string;
-    longDescription: ReactNode;
-    onCheckItOut: () => void;
-    docsLink: string;
-    preview?: ReactNode;
-    summary: string;
     beta: boolean;
 }
 

frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleashTooltip.tsx

@@ -78,15 +78,20 @@ const StyledTitle = styled('div')(({ theme }) => ({
 }));
 
 const ReadMore = styled(Box)(({ theme }) => ({
-    padding: theme.spacing(3, 0),
+    paddingTop: theme.spacing(3),
+    paddingBottom: theme.spacing(1),
+}));
+
+const StyledCheckItOutButton = styled(Button)(({ theme }) => ({
+    marginTop: theme.spacing(2),
 }));
 
 export const NewInUnleashTooltip: FC<{
     children: React.ReactElement<any, any>;
     title: string;
     longDescription: ReactNode;
-    docsLink: string;
-    onCheckItOut: () => void;
+    docsLink?: string;
+    onCheckItOut?: () => void;
     open: boolean;
     preview?: ReactNode;
     onClose: () => void;
@@ -134,6 +139,9 @@ export const NewInUnleashTooltip: FC<{
                             />
                         </StyledTitle>
                         <LongDescription>{longDescription}</LongDescription>
+                        <ConditionallyRender
+                            condition={Boolean(docsLink)}
+                            show={
                                 <ReadMore>
                                     <StyledLink
                                         component='a'
@@ -146,7 +154,12 @@ export const NewInUnleashTooltip: FC<{
                                         documentation
                                     </StyledLink>
                                 </ReadMore>
-                        <Button
+                            }
+                        />
+                        <ConditionallyRender
+                            condition={Boolean(onCheckItOut)}
+                            show={
+                                <StyledCheckItOutButton
                                     variant='contained'
                                     color='primary'
                                     type='submit'
@@ -154,11 +167,13 @@ export const NewInUnleashTooltip: FC<{
                                     onClick={(event) => {
                                         event.stopPropagation();
                                         onClose();
-                                onCheckItOut();
+                                        onCheckItOut!();
                                     }}
                                 >
                                     Check it out
-                        </Button>
+                                </StyledCheckItOutButton>
+                            }
+                        />
                     </Body>
                 </Box>
             </ClickAwayListener>