feat: CP-11851 Core concierge (#432)

Author: vvava

apps/next/package.json

@@ -41,9 +41,12 @@
     "date-fns": "4.1.0",
     "motion": "12.5.0",
     "react": "19.0.0",
+    "react-custom-scrollbars-2": "4.5.0",
     "react-dom": "19.0.0",
     "react-i18next": "11.18.6",
     "react-icons": "5.4.0",
+    "react-markdown": "10.1.0",
+    "react-transition-group": "4.4.2",
     "react-virtualized": "9.22.3",
     "react-window": "1.8.11",
     "zod": "3.23.8"

apps/next/src/components/Header/ConciergePrompt.tsx

@@ -0,0 +1,182 @@
+import {
+  Box,
+  getHexAlpha,
+  Stack,
+  Typography,
+  useTheme,
+} from '@avalabs/k2-alpine';
+import { FC, useRef, useState } from 'react';
+import { useHistory } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { CSSTransition, TransitionGroup } from 'react-transition-group';
+import {
+  AnimatedButton,
+  CSS_CLASSES,
+  PromptButtonBackground,
+  TextAnimation,
+} from './components/styledComponents';
+import { useFeatureFlagContext, useSettingsContext } from '@core/ui';
+import { FeatureGates } from '@core/types';
+import { ConciergePromptBackground } from './components/ConciergePromptBackground';
+import { ConciergeBackdrop } from './components/ConciergeBackdrop';
+
+type ConciergePromptProps = {
+  isAIBackdropOpen: boolean;
+  setIsAIBackdropOpen: (isOpen: boolean) => void;
+};
+
+export const ConciergePrompt: FC<ConciergePromptProps> = ({
+  isAIBackdropOpen,
+  setIsAIBackdropOpen,
+}) => {
+  const theme = useTheme();
+  const history = useHistory();
+  const { t } = useTranslation();
+
+  const [isHoverAreaHidden, setIsHoverAreaHidden] = useState(false);
+  const { coreAssistant } = useSettingsContext();
+  const { featureFlags } = useFeatureFlagContext();
+  const timer = useRef<NodeJS.Timeout | null>(null);
+  const hasBackdropEntered = useRef(false);
+
+  const buttonLabels = [
+    t('Ask Core Concierge to send crypto'),
+    t('Ask Core Concierge to swap tokens'),
+    t('Ask Core Concierge to bridge tokens'),
+    t('Ask Core Concierge to transfer for you'),
+    t('Ask Core Concierge to manage accounts'),
+  ];
+
+  const getRandomButtonLabel = () => {
+    return buttonLabels[Math.floor(Math.random() * buttonLabels.length)];
+  };
+
+  const conciergeButtonRef = useRef(null);
+  const conciergeBackgroundRef = useRef(null);
+  const conciergeBackdropRef = useRef(null);
+
+  if (!coreAssistant || !featureFlags[FeatureGates.CORE_ASSISTANT]) {
+    return null;
+  }
+
+  return (
+    <>
+      {/* THE BOX AREA WHERE WE WANT TO CATCH THE CURSOR */}
+      <Stack
+        sx={{
+          width: '100%',
+          height: '40px',
+          position: 'absolute',
+          top: '56px',
+          zIndex: isHoverAreaHidden ? 0 : theme.zIndex.tooltip - 1,
+        }}
+        onMouseEnter={() => {
+          timer.current = setTimeout(() => {
+            setIsAIBackdropOpen(true);
+          }, 400);
+        }}
+        onMouseLeave={() => {
+          if (!isAIBackdropOpen && timer.current) {
+            clearTimeout(timer.current);
+          }
+        }}
+      />
+      <TransitionGroup component={null}>
+        <Stack>
+          {/* GRADIENT BACKGROUND */}
+          <CSSTransition
+            key={1}
+            timeout={200}
+            classNames={CSS_CLASSES.OVERLAY}
+            appear
+            enter
+            exit
+            in={isAIBackdropOpen}
+            nodeRef={conciergeBackgroundRef}
+          >
+            <ConciergePromptBackground>
+              <PromptButtonBackground
+                ref={conciergeBackgroundRef}
+                className={CSS_CLASSES.PROMPT_BACKGROUND}
+              />
+            </ConciergePromptBackground>
+          </CSSTransition>
+          {/* BACKDROP */}
+          <CSSTransition
+            key={2}
+            timeout={1000}
+            classNames={CSS_CLASSES.BACKDROP}
+            appear
+            exit
+            in={isAIBackdropOpen}
+            nodeRef={conciergeBackdropRef}
+            onExited={() => {
+              hasBackdropEntered.current = false;
+            }}
+          >
+            <ConciergeBackdrop
+              conciergeBackdropRef={conciergeBackdropRef}
+              hasBackdropEntered={hasBackdropEntered}
+              setIsAIBackdropOpen={setIsAIBackdropOpen}
+              setIsHoverAreaHidden={setIsHoverAreaHidden}
+            />
+          </CSSTransition>
+          {/* THE BUTTON */}
+          <CSSTransition
+            key={3}
+            timeout={1000}
+            classNames={CSS_CLASSES.BUTTON}
+            appear
+            exit
+            in={isAIBackdropOpen}
+            nodeRef={conciergeButtonRef}
+            onEntered={() => {
+              // it needs to be delayed (waiting for the button animation getting done) to avoid the glitch
+              setTimeout(() => {
+                setIsHoverAreaHidden(true);
+                hasBackdropEntered.current = true;
+              }, 500);
+            }}
+          >
+            <Stack
+              sx={{
+                position: 'absolute',
+                top: '56px',
+                width: '100%',
+                height: '40px',
+                px: 1.5,
+              }}
+            >
+              <AnimatedButton
+                variant="contained"
+                sx={{
+                  borderColor: 'common.white_10',
+                  maxWidth: '100%',
+                  justifyContent: 'flex-start',
+                  px: 1.5,
+                  backgroundColor: getHexAlpha(theme.palette.text.primary, 30),
+                  color: 'common.white',
+                }}
+                onClick={() => {
+                  history.push('/concierge');
+                }}
+                size="large"
+                fullWidth
+                ref={conciergeButtonRef}
+              >
+                <Box component="span" sx={{ mr: 1, fontSize: 24 }}>
+                  ✨
+                </Box>
+                <TextAnimation>
+                  <Typography variant="subtitle3">
+                    {isAIBackdropOpen && getRandomButtonLabel()}
+                  </Typography>
+                </TextAnimation>
+              </AnimatedButton>
+            </Stack>
+          </CSSTransition>
+        </Stack>
+      </TransitionGroup>
+    </>
+  );
+};

apps/next/src/components/Header/Header.tsx

@@ -1,47 +1,23 @@
-import {
-  getHexAlpha,
-  Stack,
-  styled,
-  Typography,
-  useTheme,
-} from '@avalabs/k2-alpine';
+import { getHexAlpha, Stack, Typography, useTheme } from '@avalabs/k2-alpine';
 import { useAccountsContext } from '@core/ui';
 import { useState } from 'react';
 import { MdOutlineUnfoldMore } from 'react-icons/md';
 import { useHistory } from 'react-router-dom';
 import { PersonalAvatar } from '../PersonalAvatar';
 import { AddressList } from './AddressList';
 import { HeaderActions } from './components/HeaderActions';
-
-const AccountInfo = styled(Stack)`
-  cursor: pointer;
-  border-radius: 10px;
-  padding: ${({ theme }) => theme.spacing(0.5)};
-  transition: ${({ theme }) =>
-    theme.transitions.create(['background', 'opacity'])};
-  flex-direction: row;
-  align-items: center;
-  & > svg {
-    opacity: 0;
-  }
-`;
-
-const AccountSelectContainer = styled(Stack)`
-  cursor: pointer;
-  position: relative;
-  &:hover > div:first-of-type {
-    background: ${({ theme }) => getHexAlpha(theme.palette.primary.main, 10)};
-    & > svg {
-      opacity: 1;
-    }
-  }
-`;
+import {
+  AccountInfo,
+  AccountSelectContainer,
+} from './components/styledComponents';
+import { ConciergePrompt } from './ConciergePrompt';
 
 export const Header = () => {
   const { accounts } = useAccountsContext();
   const activeAccount = accounts.active;
   const theme = useTheme();
   const [isAddressAppear, setIsAddressAppear] = useState(false);
+  const [isAIBackdropOpen, setIsAIBackdropOpen] = useState(false);
   const history = useHistory();
 
   // TODO: fix this after the transactions will be implemented
@@ -69,7 +45,10 @@ export const Header = () => {
           alignItems: 'center',
           justifyContent: 'space-between',
           px: 1,
-          zIndex: 1,
+          zIndex: theme.zIndex.tooltip + 1,
+        }}
+        onMouseEnter={() => {
+          setIsAIBackdropOpen(false);
         }}
       >
         <AccountSelectContainer
@@ -95,6 +74,10 @@ export const Header = () => {
           pendingTransaction={isTransactionPending}
         />
       </Stack>
+      <ConciergePrompt
+        isAIBackdropOpen={isAIBackdropOpen}
+        setIsAIBackdropOpen={setIsAIBackdropOpen}
+      />
     </Stack>
   );
 };

apps/next/src/components/Header/components/ConciergeBackdrop.tsx

@@ -0,0 +1,49 @@
+import { Stack, useTheme } from '@avalabs/k2-alpine';
+import { getClassSelector } from './styledComponents';
+
+type ConciergeBackdropProps = {
+  conciergeBackdropRef: React.RefObject<HTMLDivElement | null>;
+  hasBackdropEntered: React.RefObject<boolean>;
+  setIsAIBackdropOpen: (isOpen: boolean) => void;
+  setIsHoverAreaHidden: (isHidden: boolean) => void;
+};
+
+export const ConciergeBackdrop = ({
+  conciergeBackdropRef,
+  hasBackdropEntered,
+  setIsAIBackdropOpen,
+  setIsHoverAreaHidden,
+}: ConciergeBackdropProps) => {
+  const theme = useTheme();
+  return (
+    <Stack
+      sx={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        background: '#28282ECC',
+        backdropFilter: 'none',
+        display: 'none',
+        transition: 'opacity 400ms linear',
+        opacity: 0,
+        zIndex: theme.zIndex.appBar - 1,
+        [`&.${getClassSelector('BACKDROP', 'enter')}`]: {
+          display: 'flex',
+        },
+        [`&.${getClassSelector('BACKDROP', 'enter-done')}`]: {
+          display: 'flex',
+          opacity: 1,
+        },
+      }}
+      ref={conciergeBackdropRef}
+      onMouseMove={() => {
+        if (hasBackdropEntered.current) {
+          setIsAIBackdropOpen(false);
+          setIsHoverAreaHidden(false);
+        }
+      }}
+    />
+  );
+};

apps/next/src/components/Header/components/ConciergePromptBackground.tsx

@@ -0,0 +1,35 @@
+import { Stack } from '@avalabs/k2-alpine';
+import { PropsWithChildren } from 'react';
+import { CSS_CLASSES, getClassSelector } from './styledComponents';
+
+export const ConciergePromptBackground = ({ children }: PropsWithChildren) => {
+  return (
+    <Stack
+      sx={{
+        [`.${CSS_CLASSES.PROMPT_BACKGROUND}`]: {
+          display: 'none',
+          opacity: 0,
+          transition: `opacity 400ms linear`,
+        },
+        [`.${getClassSelector('OVERLAY', 'enter', 'PROMPT_BACKGROUND')}`]: {
+          display: 'block',
+        },
+        [`.${getClassSelector('OVERLAY', 'enter-done', 'PROMPT_BACKGROUND')}`]:
+          {
+            display: 'block',
+            opacity: 1,
+          },
+        [`.${getClassSelector('OVERLAY', 'exit', 'PROMPT_BACKGROUND')}`]: {
+          display: 'block',
+          opacity: 1,
+        },
+        [`.${getClassSelector('OVERLAY', 'exit-done', 'PROMPT_BACKGROUND')}`]: {
+          display: 'block',
+          opacity: 0,
+        },
+      }}
+    >
+      {children}
+    </Stack>
+  );
+};