@envive-ai/react-toolkit-v3 0.3.28 → 0.3.29

package/src/components/FullPageSalesAgent/components/WelcomeOverlay.tsx

@@ -56,23 +56,15 @@ export const WelcomeOverlay = ({
   const showProductCarousel = !isLoading && products.length > 0 && !!productCarouselTitle;
 
   const welcomeOverlayClassNames = classNames([
+    'envive-overlay',
     'envive-tw-inset-0',
     'envive-tw-absolute',
     'envive-tw-z-20',
     'envive-tw-flex',
     'envive-tw-w-full',
-    'envive-tw-h-full',
-    'envive-tw-max-w-[768px]',
     'envive-tw-flex-col',
   ]);
 
-  const titleClassNames = classNames([
-    'envive-tw-flex',
-    'envive-tw-flex-row',
-    'envive-tw-gap-2',
-    'envive-tw-items-center',
-  ]);
-
   const titleBoxClassNames = classNames([
     'envive-tw-flex',
     'envive-tw-py-4',
@@ -85,6 +77,22 @@ export const WelcomeOverlay = ({
     'envive-tw-border',
     'envive-tw-rounded-global-custom',
   ]);
+  const overlayContentClassNames = classNames([
+    'envive-tw-inset-0',
+    'envive-tw-mx-auto',
+    'envive-tw-flex',
+    'envive-tw-w-full',
+    'envive-tw-max-w-[768px]',
+    'envive-tw-flex-1',
+    'envive-tw-flex-col',
+    'envive-tw-gap-6',
+    'envive-tw-overflow-y-auto',
+    'envive-tw-overflow-x-hidden',
+    'envive-tw-px-4',
+    'envive-tw-pb-4',
+    'envive-tw-pt-6',
+    'lg:envive-tw-gap-10',
+  ]);
   return (
     <AnimatePresence>
       {show && (
@@ -95,15 +103,20 @@ export const WelcomeOverlay = ({
           initial={{ opacity: 1 }}
           exit={{ opacity: 0, transition: { duration: 0.5, ease: 'easeIn' } }}
         >
-          <div className="envive-tw-flex envive-tw-flex-1 envive-tw-flex-col envive-tw-gap-6 envive-tw-overflow-y-auto envive-tw-overflow-x-hidden envive-tw-px-4 envive-tw-pb-4 envive-tw-pt-6 lg:envive-tw-gap-10">
+          <div className={overlayContentClassNames}>
             <div className={titleBoxClassNames}>
-              <div className={titleClassNames}>
-                <Typography variant={TypographyVariant.T3_MD}>{title}</Typography>
-                <SparkleAnimation
-                  color={sparkleColor}
-                  animate={false}
-                />
-              </div>
+              <Typography
+                variant={TypographyVariant.T3_MD}
+                as="span"
+              >
+                {title}
+                <span className="envive-tw-ml-1 envive-tw-inline-block envive-tw-align-top">
+                  <SparkleAnimation
+                    color={sparkleColor}
+                    animate={false}
+                  />
+                </span>
+              </Typography>
               {chatFooter}
               {promptSuggestions.length > 0 && (
                 <PromptCarousel