@envive-ai/react-toolkit-v3 0.3.19 → 0.3.21

package/src/components/FloatingChat/hooks/useProductResultsView.ts

@@ -1,5 +1,10 @@
-import { useEffect, useRef, useState } from 'react';
-import { getCleanProducts } from '../utils/functions';
+import { Message, MessageType } from '@envive-ai/react-hooks/application/models';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  getCleanProducts,
+  getCleanProductsForResultsGrid,
+  getSearchQueryFromMessageBlock,
+} from '../utils/functions';
 
 export type ResultsViewData = {
   products: ReturnType<typeof getCleanProducts>;
@@ -22,6 +27,24 @@ export const useProductResultsView = ({ scrollToBottom }: UseResultsViewProps) =
     setResultsViewData(null);
   };
 
+  const handleExploreAllResults = useCallback(
+    (firstProductMessageId: string, messages: Message[][]) => {
+      const blockIndex = messages.findIndex(block =>
+        block.some(msg => msg.type === MessageType.Product && msg.id === firstProductMessageId),
+      );
+      if (blockIndex < 0) return;
+
+      const messageBlock = messages[blockIndex];
+      const productMessages = messageBlock.filter(msg => msg.type === MessageType.Product);
+      const products = getCleanProductsForResultsGrid(productMessages);
+      if (products.length === 0) return;
+
+      const searchQuery = getSearchQueryFromMessageBlock(messages, blockIndex);
+      setResultsViewData({ products, searchQuery });
+    },
+    [],
+  );
+
   // Scroll to top when navigating to results view
   useEffect(() => {
     if (isResultsView && scrollContainerRef.current) {
@@ -45,5 +68,6 @@ export const useProductResultsView = ({ scrollToBottom }: UseResultsViewProps) =
     scrollContainerRef,
     isResultsViewRef,
     handleBackToChat,
+    handleExploreAllResults,
   };
 };

package/src/components/FloatingChat/types/types.ts

@@ -69,4 +69,8 @@ export interface FloatingChatProps {
    * Debug bar to display in the chat.
    */
   debugBar?: React.ReactNode;
+  /**
+   * Updates whether the product results modal is open (desktop full-width grid view).
+   */
+  setIsResultsModalOpen?: (isOpen: boolean) => void;
 }

package/src/components/FloatingChat/utils/functions.ts

@@ -34,27 +34,42 @@ export const checkIfHideAgentName = (messages: Message[]) => {
   );
 };
 
+const mapProductMessageToCardProps = (msg: Message): SalesAgentProductCardProps | null => {
+  if (msg.type !== MessageType.Product) return null;
+  return {
+    id: msg.id,
+    productName: msg.metadata.title,
+    currentPrice: msg.metadata.salePrice,
+    previousPrice: msg.metadata.originalPrice,
+    pricePrefix: '$',
+    rate: msg.metadata.averageRating,
+    numberOfReviews: msg.metadata.numberReviews,
+    url: msg.metadata.url,
+    image: {
+      src: msg.metadata.imageUrl,
+      alt: `${msg.metadata.title} image`,
+    },
+  };
+};
+
+/** Product cards for carousels; excludes grid-only rows from the API (`isForGrid`). */
 export const getCleanProducts = (messages: Message[]) => {
-  const products: SalesAgentProductCardProps[] = messages.map(msg => {
-    if (msg.type === MessageType.Product && !msg.metadata.isForGrid) {
-      return {
-        productName: msg.metadata.title,
-        currentPrice: msg.metadata.salePrice,
-        previousPrice: msg.metadata.originalPrice,
-        pricePrefix: '$',
-        rate: msg.metadata.averageRating,
-        numberOfReviews: msg.metadata.numberReviews,
-        url: msg.metadata.url,
-        image: {
-          src: msg.metadata.imageUrl,
-          alt: `${msg.metadata.title} image`,
-        },
-      };
-    }
-    return null;
-  });
+  const cleanProducts = messages
+    .map(msg =>
+      msg.type === MessageType.Product && !msg.metadata.isForGrid
+        ? mapProductMessageToCardProps(msg)
+        : null,
+    )
+    .filter((p): p is SalesAgentProductCardProps => p !== null);
+  return cleanProducts;
+};
 
-  return products.filter(product => product !== null);
+/** All product rows in a turn, including `isForGrid`, for the full results grid. */
+export const getCleanProductsForResultsGrid = (messages: Message[]) => {
+  const productsForGrid = messages
+    .map(msg => (msg.type === MessageType.Product ? mapProductMessageToCardProps(msg) : null))
+    .filter((p): p is SalesAgentProductCardProps => p !== null);
+  return productsForGrid;
 };
 
 export const getCleanReviews = (messages: Message[]) => {

package/src/components/FloatingChat/utils/trackProductCardInteraction.ts

@@ -0,0 +1,26 @@
+import { EnviveMetricsEventName } from '@envive-ai/react-hooks/contexts/amplitudeContext';
+import {
+  type WidgetInteraction,
+  WidgetInteractionComponent,
+  WidgetInteractionType,
+} from '@envive-ai/react-hooks/hooks/WidgetInteraction/types';
+import type { SalesAgentProductCardProps } from '../../SalesAgentProductCard/types/types';
+
+export const trackProductCardClicked = (
+  trackWidgetInteraction: (props: WidgetInteraction) => void,
+  widget: WidgetInteractionComponent,
+  product: SalesAgentProductCardProps,
+) => {
+  trackWidgetInteraction({
+    eventName: EnviveMetricsEventName.WidgetInteraction,
+    trigger: {
+      widget,
+      widget_interaction: WidgetInteractionType.PRODUCT_CARD_CLICKED,
+      widget_interaction_data: {
+        product_card_clicked: {
+          product_id: product.id,
+        },
+      },
+    },
+  });
+};

package/src/components/FullPageSalesAgent/FullPageSalesAgent.tsx

@@ -13,7 +13,10 @@ import { ChatFooter } from '../ChatFooter';
 import { Disclaimer } from '../Disclaimer';
 import { FloatingChatComponents } from '../FloatingChat/components';
 import { useChatSuggestions } from '../FloatingChat/hooks/useChatSuggestions';
+import { useProductResultsView } from '../FloatingChat/hooks/useProductResultsView';
 import { useScrollToBottom } from '../FloatingChat/hooks/useScrollToBottom';
+import { trackProductCardClicked } from '../FloatingChat/utils/trackProductCardInteraction';
+import { SalesAgentProductCardProps } from '../SalesAgentProductCard/types/types';
 import { PromptButtonVariant } from '../PromptButton';
 import { PromptCarousel, PromptCarouselRows, usePromptCarouselAnalytics } from '../PromptCarousel';
 import { Theme } from '../Tokens';
@@ -24,6 +27,11 @@ import { useGetFooterStyles } from './hooks/useGetFooterStyles';
 import { useGetMessagesStyles } from './hooks/useGetMessagesStyles';
 import { useGetScrollContentStyles } from './hooks/useGetScrollContentStyles';
 import { useIsMobile } from './hooks/useIsMobile';
+import {
+  NUM_COLUMNS_FPSA,
+  NUM_COLUMNS_MOBILE,
+  ResultsGridColumnCount,
+} from '../FloatingChat/components/ResultsGridView';
 
 interface FullPageSalesAgentProps {
   theme?: Theme;
@@ -107,6 +115,15 @@ export const FullPageSalesAgent = ({
     ],
   });
 
+  const {
+    resultsViewData,
+    isResultsView,
+    scrollContainerRef,
+    isResultsViewRef,
+    handleBackToChat,
+    handleExploreAllResults,
+  } = useProductResultsView({ scrollToBottom });
+
   const handleScrollToBottom = () => {
     scrollToBottom();
     trackWidgetInteraction({
@@ -128,6 +145,14 @@ export const FullPageSalesAgent = ({
     });
   };
 
+  const handleProductCardClick = (product: SalesAgentProductCardProps) => {
+    trackProductCardClicked(
+      trackWidgetInteraction,
+      WidgetInteractionComponent.FULL_PAGE_SALES_AGENT,
+      product,
+    );
+  };
+
   const welcomeMessage = (
     <div className={messageContainerClasses}>
       <WelcomeMessage
@@ -165,6 +190,7 @@ export const FullPageSalesAgent = ({
 
         setAnswerSuggestions([]);
         setGeneralSuggestions([]);
+        handleBackToChat();
       }}
       onChange={setQuery}
       onSubmit={() => {
@@ -175,6 +201,7 @@ export const FullPageSalesAgent = ({
         });
         setAnswerSuggestions([]);
         setGeneralSuggestions([]);
+        handleBackToChat();
       }}
       onFocus={handleInputQueryFocus}
       parentWidget={WidgetInteractionComponent.FULL_PAGE_SALES_AGENT}
@@ -197,6 +224,25 @@ export const FullPageSalesAgent = ({
       showVerifiedBuyer={showVerifiedBuyer}
       onFormResponseSubmitted={onFormResponseSubmitted}
       parentWidget={WidgetInteractionComponent.FULL_PAGE_SALES_AGENT}
+      onExploreAllResults={firstProductMessageId =>
+        handleExploreAllResults(firstProductMessageId, messages)
+      }
+    />
+  );
+
+  const middleContent = (
+    <FloatingChatComponents.SlideChatContent
+      isResultsView={isResultsView}
+      isResultsViewRef={isResultsViewRef}
+      resultsViewData={resultsViewData}
+      onBackToChat={handleBackToChat}
+      onProductCardClick={handleProductCardClick}
+      theme={resolvedTheme}
+      chatMessages={chatMessages}
+      scrollToBottom={scrollToBottom}
+      resultsGridColumns={
+        (isMobile ? NUM_COLUMNS_MOBILE : NUM_COLUMNS_FPSA) as ResultsGridColumnCount
+      }
     />
   );
 
@@ -232,18 +278,21 @@ export const FullPageSalesAgent = ({
   return (
     <FullPageSAComponents.Layout
       theme={resolvedTheme}
-      welcomeMessage={welcomeMessage}
+      welcomeMessage={isResultsView ? null : welcomeMessage}
       footer={footer}
-      chatMessages={chatMessages}
-      answerSuggestions={showAnswerSuggestions ? answerSuggestionsComponent : undefined}
+      chatMessages={middleContent}
+      answerSuggestions={
+        showAnswerSuggestions && !isResultsView ? answerSuggestionsComponent : undefined
+      }
       scrollToBottomButton={
-        showScrollButton ? (
+        !isResultsView && showScrollButton ? (
           <FloatingChatComponents.ScrollToBottomButton onClick={handleScrollToBottom} />
         ) : undefined
       }
-      disclaimer={disclaimer}
+      disclaimer={isResultsView ? null : disclaimer}
       headerContainer={headerContainer}
       autoHeight={autoHeight}
+      scrollContainerRef={scrollContainerRef}
     />
   );
 };

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

@@ -17,6 +17,8 @@ export interface LayoutProps {
   disclaimer?: React.ReactNode;
   headerContainer?: string;
   autoHeight?: boolean;
+  /** Scrollable content ref (e.g. scroll to top when opening product results grid) */
+  scrollContainerRef?: React.RefObject<HTMLDivElement | null>;
 }
 
 export const Layout = ({
@@ -29,6 +31,7 @@ export const Layout = ({
   disclaimer,
   headerContainer,
   autoHeight,
+  scrollContainerRef,
 }: LayoutProps) => {
   const hasWelcomeMessage = isValidElement(welcomeMessage);
   const hasAnswerSuggestions = isValidElement(answerSuggestions);
@@ -45,7 +48,10 @@ export const Layout = ({
       className={containerClasses}
       style={containerStyles}
     >
-      <div className={contentClasses}>
+      <div
+        ref={scrollContainerRef}
+        className={contentClasses}
+      >
         <Stack
           direction="column"
           justify="between"