@envive-ai/react-toolkit-v3 0.3.43 → 0.3.44

package/dist/WidgetWrapper/WidgetWrapper.d.ts

@@ -1,5 +1,5 @@
 import { WidgetWrapperProps } from "./types/types.js";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime8 from "react/jsx-runtime";
 
 //#region src/components/WidgetWrapper/WidgetWrapper.d.ts
 
@@ -16,6 +16,6 @@ declare const WidgetWrapper: ({
   className,
   style,
   ...containerProps
-}: WidgetWrapperProps) => react_jsx_runtime0.JSX.Element;
+}: WidgetWrapperProps) => react_jsx_runtime8.JSX.Element;
 //#endregion
 export { WidgetWrapper };

package/dist/WidgetWrapperWithTitle/WidgetWrapperWithTitle.d.cts

@@ -1,5 +1,5 @@
 import { WidgetWrapperWithTitleProps } from "./types/types.cjs";
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime10 from "react/jsx-runtime";
 
 //#region src/components/WidgetWrapperWithTitle/WidgetWrapperWithTitle.d.ts
 declare const WidgetWrapperWithTitle: ({
@@ -14,6 +14,6 @@ declare const WidgetWrapperWithTitle: ({
   hexCardColor,
   hideLogo,
   fullIsLoading
-}: WidgetWrapperWithTitleProps) => react_jsx_runtime3.JSX.Element;
+}: WidgetWrapperWithTitleProps) => react_jsx_runtime10.JSX.Element;
 //#endregion
 export { WidgetWrapperWithTitle };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-toolkit-v3",
-  "version": "0.3.43",
+  "version": "0.3.44",
   "description": "React component library for Envive services.",
   "keywords": [
     "react",

package/src/components/Carousel/components/Container.tsx

@@ -89,7 +89,7 @@ export const Container = ({
             <div
               key={`carousel-item-${String(index)}`}
               data-carousel-item
-              className="envive-tw-flex-shrink-0"
+              className="envive-tw-flex envive-tw-flex-shrink-0 envive-tw-flex-col"
             >
               {item}
             </div>

package/src/components/Carousel/components/Item.tsx

@@ -5,5 +5,5 @@ export type ItemProps = {
 };
 
 export const Item = ({ children }: ItemProps) => {
-  return <Container>{children}</Container>;
+  return <Container className="envive-tw-flex-1">{children}</Container>;
 };

package/src/components/FullPageSalesAgent/FullPageSalesAgent.tsx

@@ -1,6 +1,9 @@
 import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
 import { listeningToSpeechAtom } from '@envive-ai/react-hooks/atoms/chat';
-import { EnviveMetricsEventName } from '@envive-ai/react-hooks/contexts/amplitudeContext';
+import {
+  EnviveMetricsEventName,
+  useAmplitude,
+} from '@envive-ai/react-hooks/contexts/amplitudeContext';
 import { HardcopyResponse } from '@envive-ai/react-hooks/contexts/hardcopyContext';
 import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
 import {
@@ -46,6 +49,7 @@ export interface FullPageSalesAgentProps {
   widgetConfig: FullPageSalesAgentWidgetV3Config;
   hardcopyContent: HardcopyResponse;
   voiceInputEnabled?: boolean;
+  debugBar?: React.ReactNode;
 }
 
 export const FullPageSalesAgent = ({
@@ -55,6 +59,7 @@ export const FullPageSalesAgent = ({
   widgetConfig,
   hardcopyContent,
   voiceInputEnabled,
+  debugBar,
 }: FullPageSalesAgentProps) => {
   const resolvedTheme = resolveTheme(theme);
   const salesAgentData = useSalesAgent(WidgetInteractionComponent.FULL_PAGE_SALES_AGENT);
@@ -63,10 +68,11 @@ export const FullPageSalesAgent = ({
   const { messageClasses } = useGetMessagesStyles();
   const { isMobile } = useIsMobile();
   const { trackWidgetInteraction } = useWidgetInteraction();
+  const { trackEvent } = useAmplitude();
   const { onDrag, onHover, onMouseDown, onMouseUp, onTouchStart, onTouchEnd } =
     usePromptCarouselAnalytics(WidgetInteractionComponent.FULL_PAGE_SALES_AGENT, text => text);
-  const getOverlaySuggestionId = useCallback(
-    (text: string) => {
+  const getOverlayStringId = useCallback(
+    (text: string): string | undefined => {
       const rawValues = hardcopyContent?.rawValues;
       if (rawValues) {
         for (const raw of Object.values(rawValues)) {
@@ -75,10 +81,14 @@ export const FullPageSalesAgent = ({
           if (found) return found.id;
         }
       }
-      return text;
+      return undefined;
     },
     [hardcopyContent?.rawValues],
   );
+  const getOverlaySuggestionId = useCallback(
+    (text: string) => getOverlayStringId(text) ?? text,
+    [getOverlayStringId],
+  );
   const {
     onDrag: onOverlayDrag,
     onHover: onOverlayHover,
@@ -108,6 +118,7 @@ export const FullPageSalesAgent = ({
     mobileBackgroundImage,
     desktopBackgroundImage,
     backgroundColor,
+    chatBackgroundColor,
   } = widgetConfig;
 
   const backgroundStyle = useMemo((): React.CSSProperties => {
@@ -135,6 +146,13 @@ export const FullPageSalesAgent = ({
     isMobile,
   ]);
 
+  const chatBackgroundStyle = useMemo((): React.CSSProperties | undefined => {
+    if (chatBackgroundColor) {
+      return { backgroundColor: chatBackgroundColor };
+    }
+    return undefined;
+  }, [chatBackgroundColor]);
+
   const { agentName } = lookAndFeelConfig;
 
   const {
@@ -292,6 +310,17 @@ export const FullPageSalesAgent = ({
           },
         },
       });
+      // Also emit Widget Text Clicked so the AI-suggestions bandit attributes the
+      // click to the served chip (it joins on response_id + matches by text), the
+      // same contract PromptCarousel/SocialProof use.
+      trackEvent({
+        eventName: EnviveMetricsEventName.WidgetTextClicked,
+        eventProps: {
+          response_id: hardcopyContent?.responseId,
+          string_id: getOverlayStringId(buttonText),
+          text: buttonText,
+        },
+      });
       onTypedMessageSubmitted({
         query: buttonText,
         userTyped: false,
@@ -304,7 +333,10 @@ export const FullPageSalesAgent = ({
     },
     [
       getOverlaySuggestionId,
+      getOverlayStringId,
       trackWidgetInteraction,
+      trackEvent,
+      hardcopyContent?.responseId,
       onTypedMessageSubmitted,
       setListeningToSpeech,
       setAnswerSuggestions,
@@ -467,10 +499,12 @@ export const FullPageSalesAgent = ({
             <FloatingChatComponents.ScrollToBottomButton onClick={handleScrollToBottom} />
           ) : undefined
         }
+        chatBackgroundStyle={chatBackgroundStyle}
         disclaimer={isResultsView ? null : disclaimer}
         headerContainer={headerContainer}
         autoHeight={autoHeight}
         scrollContainerRef={scrollContainerRef}
+        debugBar={debugBar}
         overlay={
           overlayEnabled && showOverlay ? (
             <WelcomeOverlay

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

@@ -23,6 +23,9 @@ export interface LayoutProps {
   overlay?: React.ReactNode;
   /** Background style applied to the container (background image or color). */
   backgroundStyle?: React.CSSProperties;
+  /** Background style applied to the chat container (background image or color). */
+  chatBackgroundStyle?: React.CSSProperties;
+  debugBar?: React.ReactNode;
 }
 
 export const Layout = ({
@@ -38,6 +41,8 @@ export const Layout = ({
   scrollContainerRef,
   overlay,
   backgroundStyle,
+  chatBackgroundStyle,
+  debugBar,
 }: LayoutProps) => {
   const hasWelcomeMessage = isValidElement(welcomeMessage);
   const hasAnswerSuggestions = isValidElement(answerSuggestions);
@@ -72,6 +77,7 @@ export const Layout = ({
         <Stack
           direction="column"
           gap="0"
+          style={{ ...chatBackgroundStyle }}
           className={classNames(
             (!hasWelcomeMessage || (hasWelcomeMessage && theme === Theme.STANDARD)) &&
               !hasAnswerSuggestions &&
@@ -92,6 +98,7 @@ export const Layout = ({
           </div>
         )}
         {footer}
+        {debugBar && <div className="envive-debug-bar">{debugBar}</div>}
       </div>
     </div>
   );

package/src/components/SalesAgentProductCard/components/Container.tsx

@@ -37,8 +37,13 @@ export const Container = ({
   target = '_self',
   onClick,
 }: ContainerProps) => {
-  const { baseClassName, themeContainerClassNames, containerDirection, containerWidthClassName } =
-    useGetContainerProperties({ theme, variant });
+  const {
+    baseClassName,
+    themeContainerClassNames,
+    containerDirection,
+    containerWidthClassName,
+    containerHeightClassName,
+  } = useGetContainerProperties({ theme, variant });
 
   const {
     themeProductDescriptionClassNames,
@@ -68,13 +73,18 @@ export const Container = ({
       testId={testId}
       component="a"
       style={style}
-      className={className}
+      className={classNames(className, containerHeightClassName)}
       {...(anchorProps as React.ComponentPropsWithoutRef<'a'>)}
     >
       <Stack
         direction={containerDirection}
         gap="0"
-        className={classNames(baseClassName, themeContainerClassNames, containerWidthClassName)}
+        className={classNames(
+          baseClassName,
+          themeContainerClassNames,
+          containerWidthClassName,
+          containerHeightClassName,
+        )}
       >
         {image}
         <Stack
@@ -83,7 +93,7 @@ export const Container = ({
           className={classNames(themeProductDescriptionClassNames, smallVariantClassName)}
           justify={productDescriptionJustify}
         >
-          {productName}
+          <div className="envive-tw-flex-1">{productName}</div>
           <Stack
             direction="row"
             justify="between"

package/src/components/SalesAgentProductCard/hooks/useGetContainerProperties.ts

@@ -35,5 +35,15 @@ export const useGetContainerProperties = ({ theme, variant }: UseGetContainerPro
     return containerWidthClassNameMap[variant] ?? '';
   }, [variant]);
 
-  return { themeContainerClassNames, baseClassName, containerDirection, containerWidthClassName };
+  const containerHeightClassName = useMemo(() => {
+    return variant === SalesAgentProductCardVariant.LARGE ? 'envive-tw-h-full' : '';
+  }, [variant]);
+
+  return {
+    themeContainerClassNames,
+    baseClassName,
+    containerDirection,
+    containerWidthClassName,
+    containerHeightClassName,
+  };
 };

package/src/components/SalesAgentProductCard/hooks/useGetProductDescriptionProperties.ts

@@ -32,7 +32,11 @@ export const useGetProductDescriptionProperties = ({
       },
     };
 
-    return themeProductDescriptionClassNameMap[theme]?.[variant] ?? '';
+    return (
+      themeProductDescriptionClassNameMap[
+        theme as keyof typeof themeProductDescriptionClassNameMap
+      ]?.[variant] ?? ''
+    );
   }, [theme, variant]);
 
   const productDescriptionGap = useMemo(() => {
@@ -40,12 +44,12 @@ export const useGetProductDescriptionProperties = ({
   }, [variant]);
 
   const productDescriptionJustify = useMemo(() => {
-    return (variant === SalesAgentProductCardVariant.LARGE ? 'start' : 'center') as StackJustify;
+    return (variant === SalesAgentProductCardVariant.LARGE ? 'between' : 'center') as StackJustify;
   }, [variant]);
 
   const smallVariantClassName = useMemo(() => {
-    return variant === SalesAgentProductCardVariant.SMALL && 'envive-tw-flex-1';
-  }, [variant]);
+    return 'envive-tw-flex-1';
+  }, []);
 
   return {
     themeProductDescriptionClassNames,