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

package/src/components/FullPageSalesAgent/FullPageSalesAgent.tsx

@@ -65,6 +65,31 @@ export const FullPageSalesAgent = ({
   const { trackWidgetInteraction } = useWidgetInteraction();
   const { onDrag, onHover, onMouseDown, onMouseUp, onTouchStart, onTouchEnd } =
     usePromptCarouselAnalytics(WidgetInteractionComponent.FULL_PAGE_SALES_AGENT, text => text);
+  const getOverlaySuggestionId = useCallback(
+    (text: string) => {
+      const rawValues = hardcopyContent?.rawValues;
+      if (rawValues) {
+        for (const raw of Object.values(rawValues)) {
+          const list = Array.isArray(raw) ? raw : [raw];
+          const found = list.find(s => s.value === text);
+          if (found) return found.id;
+        }
+      }
+      return text;
+    },
+    [hardcopyContent?.rawValues],
+  );
+  const {
+    onDrag: onOverlayDrag,
+    onHover: onOverlayHover,
+    onMouseDown: onOverlayMouseDown,
+    onMouseUp: onOverlayMouseUp,
+    onTouchStart: onOverlayTouchStart,
+    onTouchEnd: onOverlayTouchEnd,
+  } = usePromptCarouselAnalytics(
+    WidgetInteractionComponent.FULL_PAGE_SALES_AGENT,
+    getOverlaySuggestionId,
+  );
   const setListeningToSpeech = useSetAtom(listeningToSpeechAtom);
 
   const {
@@ -116,12 +141,17 @@ export const FullPageSalesAgent = ({
     chatFooterTextFieldPlaceholderText,
     disclaimerText,
     welcomeOverlayTitle,
+    welcomeOverlayAnimatedPlaceholder,
     welcomeOverlayPromptSuggestions,
     welcomeOverlayProductCarouselTitle,
     welcomeOverlayProductIds,
   } = hardcopyContent?.values ?? {};
 
-  const overlayEnabled = typeof welcomeOverlayTitle === 'string' && !!welcomeOverlayTitle;
+  const overlayTitle =
+    Array.isArray(welcomeOverlayTitle) && welcomeOverlayTitle.length > 0
+      ? welcomeOverlayTitle[0]
+      : welcomeOverlayTitle;
+  const overlayEnabled = typeof overlayTitle === 'string' && !!welcomeOverlayTitle;
 
   const [showOverlay, setShowOverlay] = useState(overlayEnabled);
   const { footerStyles, footerClasses } = useGetFooterStyles({ showOverlay });
@@ -230,12 +260,28 @@ export const FullPageSalesAgent = ({
   );
 
   const handleOverlayDismiss = useCallback(() => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.FULL_PAGE_SALES_AGENT,
+        widget_interaction: WidgetInteractionType.OVERLAY_DISMISSED,
+      },
+    });
     setShowOverlay(false);
-  }, []);
+  }, [trackWidgetInteraction]);
 
-  // TODO: Migrate to Widget and submit analytics for stringId tracking
   const handleOverlaySuggestionClick = useCallback(
     (buttonText: string) => {
+      trackWidgetInteraction({
+        eventName: EnviveMetricsEventName.WidgetInteraction,
+        trigger: {
+          widget: WidgetInteractionComponent.FULL_PAGE_SALES_AGENT,
+          widget_interaction: WidgetInteractionType.SUGGESTION_CLICKED,
+          widget_interaction_data: {
+            suggestion_clicked: { suggestion_id: getOverlaySuggestionId(buttonText) },
+          },
+        },
+      });
       onTypedMessageSubmitted({
         query: buttonText,
         userTyped: true,
@@ -246,7 +292,14 @@ export const FullPageSalesAgent = ({
       setGeneralSuggestions([]);
       setShowOverlay(false);
     },
-    [onTypedMessageSubmitted, setListeningToSpeech, setAnswerSuggestions, setGeneralSuggestions],
+    [
+      getOverlaySuggestionId,
+      trackWidgetInteraction,
+      onTypedMessageSubmitted,
+      setListeningToSpeech,
+      setAnswerSuggestions,
+      setGeneralSuggestions,
+    ],
   );
 
   const promptSuggestions = useMemo(() => {
@@ -270,7 +323,11 @@ export const FullPageSalesAgent = ({
         isPendingResponse || isResponseStreaming || generalSuggestions.length === 0
       }
       hideEnviveWatermark={showOverlay || !showEnviveLogo}
-      textFieldPlaceholderText={chatFooterTextFieldPlaceholderText as string}
+      textFieldPlaceholderText={
+        showOverlay
+          ? welcomeOverlayAnimatedPlaceholder
+          : (chatFooterTextFieldPlaceholderText as string)
+      }
       promptSuggestions={promptSuggestions}
       handleButtonClick={buttonText => {
         const suggestion = suggestions.find(s => s.content === buttonText && !s.isAnswer);
@@ -381,6 +438,10 @@ export const FullPageSalesAgent = ({
     </motion.div>
   );
 
+  const productCarouselTitle = Array.isArray(welcomeOverlayProductCarouselTitle)
+    ? welcomeOverlayProductCarouselTitle[0]
+    : welcomeOverlayProductCarouselTitle;
+
   return (
     <LayoutGroup>
       <FullPageSAComponents.Layout
@@ -400,21 +461,27 @@ export const FullPageSalesAgent = ({
         headerContainer={headerContainer}
         autoHeight={autoHeight}
         scrollContainerRef={scrollContainerRef}
-        backgroundStyle={backgroundStyle}
         overlay={
-          overlayEnabled ? (
+          overlayEnabled && showOverlay ? (
             <WelcomeOverlay
               show={showOverlay}
               theme={resolvedTheme}
               suggestionButtonType={suggestionButtonType}
               sparkleColor={sparkleColor}
-              title={welcomeOverlayTitle as string}
+              title={overlayTitle}
               promptSuggestions={overlayPromptSuggestions}
-              productCarouselTitle={welcomeOverlayProductCarouselTitle as string | undefined}
+              productCarouselTitle={productCarouselTitle}
               productIds={overlayProductIds}
               backgroundStyle={backgroundStyle}
               chatFooter={showOverlay ? motionFooter : null}
               onSuggestionClick={handleOverlaySuggestionClick}
+              onSuggestionHover={onOverlayHover}
+              onSuggestionDrag={onOverlayDrag}
+              onSuggestionMouseDown={onOverlayMouseDown}
+              onSuggestionMouseUp={onOverlayMouseUp}
+              onSuggestionTouchStart={onOverlayTouchStart}
+              onSuggestionTouchEnd={onOverlayTouchEnd}
+              onProductCardClick={handleProductCardClick}
             />
           ) : null
         }

package/src/components/FullPageSalesAgent/components/Layout.tsx

@@ -49,6 +49,10 @@ export const Layout = ({
     autoHeight,
   });
 
+  if (overlay) {
+    return overlay;
+  }
+
   return (
     <div
       className={classNames(containerClasses, 'envive-tw-relative')}
@@ -89,7 +93,6 @@ export const Layout = ({
         )}
         {footer}
       </div>
-      {overlay}
     </div>
   );
 };

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

@@ -6,6 +6,7 @@ import { SparkleAnimation } from 'src/components/SparkleAnimation';
 import { PromptButtonVariant } from '../../PromptButton';
 import { AnimationSpeed, PromptCarousel, PromptCarouselRows } from '../../PromptCarousel';
 import { SalesAgentProductCardsCarousel } from '../../FloatingChat/components/SalesAgentProductCardsCarousel';
+import { SalesAgentProductCardProps } from '../../SalesAgentProductCard/types/types';
 import { useWelcomeOverlayProducts } from '../hooks/useWelcomeOverlayProducts';
 
 export interface WelcomeOverlayProps {
@@ -22,6 +23,13 @@ export interface WelcomeOverlayProps {
   /** The ChatFooter node wrapped in motion.div layoutId — shared-element anchor for the dismiss animation. */
   chatFooter: React.ReactNode;
   onSuggestionClick: (text: string) => void;
+  onSuggestionHover?: (text: string) => void;
+  onSuggestionDrag?: () => void;
+  onSuggestionMouseDown?: (text: string) => void;
+  onSuggestionMouseUp?: (text: string) => void;
+  onSuggestionTouchStart?: (text: string) => void;
+  onSuggestionTouchEnd?: (text: string) => void;
+  onProductCardClick?: (product: SalesAgentProductCardProps) => void;
 }
 
 export const WelcomeOverlay = ({
@@ -36,28 +44,27 @@ export const WelcomeOverlay = ({
   sparkleColor,
   backgroundStyle = { backgroundColor: 'white' },
   onSuggestionClick,
+  onSuggestionHover,
+  onSuggestionDrag,
+  onSuggestionMouseDown,
+  onSuggestionMouseUp,
+  onSuggestionTouchStart,
+  onSuggestionTouchEnd,
+  onProductCardClick,
 }: WelcomeOverlayProps) => {
   const { products, isLoading } = useWelcomeOverlayProducts(productIds);
   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',
@@ -70,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 && (
@@ -80,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
@@ -98,6 +126,12 @@ export const WelcomeOverlay = ({
                   promptCarouselRows={PromptCarouselRows.ALWAYS_TWO}
                   animationSpeed={AnimationSpeed.NONE}
                   handleButtonClick={onSuggestionClick}
+                  handleButtonHover={onSuggestionHover}
+                  handleButtonDrag={onSuggestionDrag}
+                  handleButtonMouseDown={onSuggestionMouseDown}
+                  handleButtonMouseUp={onSuggestionMouseUp}
+                  handleButtonTouchStart={onSuggestionTouchStart}
+                  handleButtonTouchEnd={onSuggestionTouchEnd}
                 />
               )}
             </div>
@@ -110,6 +144,7 @@ export const WelcomeOverlay = ({
                   hideBadgeCount
                   products={products}
                   hideNavigation={false}
+                  onProductCardClick={onProductCardClick}
                 />
               </div>
             )}

package/src/components/FullPageSalesAgent/hooks/useWelcomeOverlayProducts.ts

@@ -7,6 +7,7 @@ type RetrievedProduct = Awaited<
 >['products'][0];
 
 const mapToCardProps = (p: RetrievedProduct): SalesAgentProductCardProps => ({
+  id: p.id,
   productName: p.title ?? '',
   currentPrice: p.salePrice ?? 0,
   previousPrice: p.originalPrice === p.salePrice ? undefined : p.originalPrice,

package/src/components/TextField/TextField.tsx

@@ -8,6 +8,7 @@ import { useGetSkeletonProperties } from './hooks/useGetSkeletonProperties';
 import { useTextFieldFocus } from './hooks/useTextFieldFocus';
 import { useTextFieldSubmit } from './hooks/useTextFieldSubmit';
 import { useTextFieldValue } from './hooks/useTextFieldValue';
+import { usePlaceholderAnimation } from './hooks/usePlaceholderAnimation';
 import { useVoiceInput } from './hooks/useVoiceInput';
 import type { TextFieldProps } from './types';
 
@@ -30,10 +31,13 @@ export const TextField = ({
   style,
   ariaLabel,
   isLoading = false,
+  multiline = false,
   enableVoiceInput = false,
   onTranscriptionStarted,
   onTranscriptionCompleted,
 }: TextFieldProps): JSX.Element => {
+  const resolvedPlaceholder = usePlaceholderAnimation(placeholder);
+
   const { currentValue, hasValue, handleChange, resetValue } = useTextFieldValue(
     controlledValue,
     onChange,
@@ -88,7 +92,7 @@ export const TextField = ({
   const input = (
     <TextFieldComponents.Input
       theme={resolvedTheme}
-      placeholder={isLoading ? '' : placeholder}
+      placeholder={isLoading ? '' : resolvedPlaceholder}
       value={isLoading ? '' : currentValue}
       onChange={handleChange}
       onKeyDown={handleKeyDown}
@@ -97,6 +101,7 @@ export const TextField = ({
       disabled={disabled || isLoading}
       ariaLabel={ariaLabel}
       className={inputClassName}
+      multiline={multiline}
     />
   );
 
@@ -138,6 +143,7 @@ export const TextField = ({
       isFocused={isFocused}
       hasValue={hasValue}
       disabled={disabled}
+      multiline={multiline}
       id={id}
       testId={testId}
       className={classNames(className, skeletonClass, disabled && 'envive-tw-cursor-not-allowed')}

package/src/components/TextField/components/Input.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import { getInputClasses } from '../utils/getInputClasses';
 import { createInputChangeHandler } from '../utils/createInputChangeHandler';
+import { useAutoResize } from '../hooks/useAutoResize';
 import { Theme } from '../../../../tokens/theme/theme';
 
 type InputProps = {
@@ -8,10 +9,11 @@ type InputProps = {
   placeholder: string;
   value?: string;
   onChange?: (value: string) => void;
-  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
-  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;
+  onFocus?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+  onBlur?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
   disabled?: boolean;
+  multiline?: boolean;
   id?: string;
   testId?: string;
   className?: string;
@@ -28,6 +30,7 @@ export const Input = ({
   onFocus,
   onBlur,
   disabled = false,
+  multiline = false,
   id,
   testId,
   className,
@@ -36,6 +39,42 @@ export const Input = ({
 }: InputProps): JSX.Element => {
   const { inputClasses } = getInputClasses(theme);
   const handleChange = createInputChangeHandler(disabled, onChange);
+  const textareaRef = useAutoResize(multiline ? value : undefined);
+
+  const sharedClasses = classNames(
+    inputClasses,
+    'focus-visible:envive-tw-shadow-none focus-visible:envive-tw-outline-none',
+    className,
+    disabled && 'envive-tw-cursor-not-allowed',
+  );
+
+  if (multiline) {
+    return (
+      <textarea
+        ref={textareaRef}
+        id={id}
+        data-testid={testId}
+        placeholder={placeholder}
+        value={value}
+        rows={1}
+        onChange={e => {
+          if (!disabled) onChange?.(e.target.value);
+        }}
+        onKeyDown={e => {
+          if (e.key === 'Enter' && !e.shiftKey) {
+            onKeyDown?.(e);
+          }
+        }}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        disabled={disabled}
+        className={sharedClasses}
+        style={{ resize: 'none', overflow: 'hidden', padding: 0, ...style }}
+        aria-label={ariaLabel}
+        aria-disabled={disabled}
+      />
+    );
+  }
 
   return (
     <input
@@ -49,12 +88,7 @@ export const Input = ({
       onFocus={onFocus}
       onBlur={onBlur}
       disabled={disabled}
-      className={classNames(
-        inputClasses,
-        'focus-visible:envive-tw-shadow-none focus-visible:envive-tw-outline-none',
-        className,
-        disabled && 'envive-tw-cursor-not-allowed',
-      )}
+      className={sharedClasses}
       style={style}
       aria-label={ariaLabel}
       aria-disabled={disabled}

package/src/components/TextField/components/Layout.tsx

@@ -11,6 +11,7 @@ type LayoutProps = {
   isFocused: boolean;
   hasValue: boolean;
   disabled?: boolean;
+  multiline?: boolean;
   id?: string;
   testId?: string;
   className?: string;
@@ -25,6 +26,7 @@ export const Layout = ({
   isFocused,
   hasValue,
   disabled = false,
+  multiline = false,
   id,
   testId,
   className,
@@ -61,7 +63,11 @@ export const Layout = ({
           disabled && containerDisabledClasses,
           className,
         )}
-        style={style}
+        style={
+          multiline
+            ? { height: 'auto', minHeight: '40px', alignItems: 'flex-end', ...style }
+            : style
+        }
       >
         {input}
         {sendIcon}

package/src/components/TextField/hooks/useAutoResize.ts

@@ -0,0 +1,14 @@
+import { useEffect, useRef } from 'react';
+
+export const useAutoResize = (value: string | undefined): React.RefObject<HTMLTextAreaElement> => {
+  const ref = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    el.style.height = 'auto';
+    el.style.height = `${el.scrollHeight}px`;
+  }, [value]);
+
+  return ref;
+};

package/src/components/TextField/hooks/usePlaceholderAnimation.ts

@@ -0,0 +1,67 @@
+/* eslint-disable no-await-in-loop */
+import { useEffect, useRef, useState } from 'react';
+
+const DEFAULT_TYPING_DURATION = 400;
+const DEFAULT_TRANSITION = 3000;
+const CLEAR_PAUSE = 200;
+
+export const usePlaceholderAnimation = (
+  placeholder: string | string[],
+  typingDuration = DEFAULT_TYPING_DURATION,
+  transition = DEFAULT_TRANSITION,
+): string => {
+  const [current, setCurrent] = useState(() => (Array.isArray(placeholder) ? '' : placeholder));
+  const timeoutsRef = useRef<NodeJS.Timeout[]>([]);
+  const isMountedRef = useRef(true);
+
+  useEffect(() => {
+    if (!Array.isArray(placeholder)) {
+      setCurrent(placeholder);
+      return () => {};
+    }
+
+    if (placeholder.length === 0) {
+      setCurrent('');
+      return () => {};
+    }
+
+    isMountedRef.current = true;
+    timeoutsRef.current = [];
+
+    const delay = (ms: number): Promise<void> =>
+      new Promise(resolve => {
+        const id = setTimeout(resolve, ms);
+        timeoutsRef.current.push(id);
+      });
+
+    const animateChars = async (text: string) => {
+      const charDelay = text.length > 1 ? typingDuration / (text.length - 1) : 0;
+      for (let i = 0; i < text.length; i += 1) {
+        await delay(charDelay);
+        if (isMountedRef.current) setCurrent(text.substring(0, i + 1));
+      }
+    };
+
+    const run = async () => {
+      while (isMountedRef.current) {
+        for (const element of placeholder) {
+          if (!isMountedRef.current) return;
+          await animateChars(element);
+          await delay(transition);
+          if (isMountedRef.current) setCurrent('');
+          await delay(CLEAR_PAUSE);
+        }
+      }
+    };
+
+    run();
+
+    return () => {
+      isMountedRef.current = false;
+      timeoutsRef.current.forEach(clearTimeout);
+      timeoutsRef.current = [];
+    };
+  }, [placeholder, typingDuration, transition]);
+
+  return current;
+};

package/src/components/TextField/hooks/useTextFieldSubmit.ts

@@ -20,7 +20,7 @@ export const useTextFieldSubmit = (
   }, [onSubmit, hasValue, disabled, isLoading, currentValue, resetValue]);
 
   const handleKeyDown = useCallback(
-    (event: React.KeyboardEvent<HTMLInputElement>) => {
+    (event: React.KeyboardEvent<HTMLElement>) => {
       if (event.key === 'Enter' && hasValue && !disabled && !isLoading) {
         event.preventDefault();
         handleSubmit();

package/src/components/TextField/types/index.ts

@@ -8,8 +8,9 @@ export type TextFieldProps = {
   theme?: Theme;
   /**
    * Placeholder text displayed when the input is empty.
+   * Pass an array of strings to cycle through them with a typing animation.
    */
-  placeholder: string;
+  placeholder: string | string[];
   /**
    * Controlled value of the input. If not provided, the component manages its own state.
    */
@@ -47,6 +48,11 @@ export type TextFieldProps = {
    * @default false
    */
   isLoading?: boolean;
+  /**
+   * When true the input expands to multiple lines instead of scrolling horizontally.
+   * @default false
+   */
+  multiline?: boolean;
   /**
    * Enable voice input button
    * @default false